/**
 * checkradio.scss - Theme Base Check Box and Radio Button Styles
 *
 * This source-code is part of Windows XP stuff for XFCE:
 * <<https://www.oddmatics.uk>>
 *
 * Author(s): Rory Fewell <roryf@oddmatics.uk>
 */

// Selection-mode (inside a content-view)
//
@each $check_state, $check_icon, $check_color, $check_background in
    ('',                  'none',                                       'transparent',                           $checkradio_bg_color),
    (':hover',            'none',                                       'transparent',                           $checkradio_bg_color),
    (':active',           'none',                                       'transparent',                           $checkradio_bg_color),
    (':backdrop',         'none',                                       'transparent',                           '#{desaturate($checkradio_bg_color, 100%)}'),
    (':checked',          '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color,                           $checkradio_bg_color),
    (':checked:hover',    '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color,                           $checkradio_bg_color),
    (':checked:active',   '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color,                           $checkradio_bg_color),
    (':backdrop:checked', '-gtk-icontheme(\'object-select-symbolic\')', '#{transparentize($osd_fg_color, 0.2)}', '#{desaturate($checkradio_bg_color, 100%)}')
{
    .view.content-view.check#{$check_state}:not(list),
    .content-view:not(list) check#{$check_state}
    {
        background-color: #{$check_background};
        background-image: none;
        border-radius:    5px;
        border-width:     0;
        box-shadow:       none;
        color:            #{$check_color};
        margin:           4px;
        min-width:        32px;
        min-height:       32px;
        transition:       200ms;
        -gtk-icon-source: #{$check_icon};
        -gtk-icon-shadow: none;
    }
}

//
// GtkCheckButton (toggle button related?)
//
checkbutton.text-button,
radiobutton.text-button
{
    // This is for a nice focus on check and radios text
    //
    outline-offset: 0;
    padding:        2px 0;

    label:not(:only-child)
    {
        &:first-child { margin-left:  4px; }
        &:last-child  { margin-right: 4px; }
    }
}

//
// Initial structure
//
check,
radio
{
    margin: 0 4px;
    
    &:only-child
    {
        margin: 0;
    }

    // When in a popover add more space between the label and the check, reset the
    // other side margin.
    //
    // See https://bugzilla.gnome.org/show_bug.cgi?id=779570 for details.
    //
    popover &
    {
        &.left:dir(rtl)
        {
            margin-left:  0;
            margin-right: 12px;
        }

        &.right:dir(ltr)
        {
            margin-left:  12px;
            margin-right: 0;
        }
    }
    
    min-height: $checkradio_size;
    min-width:  $checkradio_size;
    -gtk-icon-source: none;
}

//
// Check box
//
%check,
check
{
    // Unchecked states
    //
    -gtk-icon-source: url("../Resources/checkbox_unchecked.png");

    &:hover
    {
        -gtk-icon-source: url("../Resources/checkbox_unchecked_hover.png");
    }

    &:active
    {
        -gtk-icon-source: url("../Resources/checkbox_unchecked_press.png");
    }

    &:disabled
    {
        -gtk-icon-source: url("../Resources/checkbox_unchecked_inactive.png");
    }

    // Checked states
    //
    &:checked
    {
        -gtk-icon-source: url("../Resources/checkbox_checked.png");

        &:hover
        {
            -gtk-icon-source: url("../Resources/checkbox_checked_hover.png");
        }

        &:active
        {
            -gtk-icon-source: url("../Resources/checkbox_checked_press.png");
        }

        &:disabled
        {
            -gtk-icon-source: url("../Resources/checkbox_checked_inactive.png");
        }
    }

    // Indeterminate states
    //
    &:indeterminate
    {
        -gtk-icon-source: url("../Resources/checkbox_indecisive.png");

        &:hover
        {
            -gtk-icon-source: url("../Resources/checkbox_indecisive_hover.png");
        }

        &:active
        {
            -gtk-icon-source: url("../Resources/checkbox_indecisive_press.png");
        }

        &:disabled
        {
            -gtk-icon-source: url("../Resources/checkbox_indecisive_inactive.png");
        }
    }
}

//
// Radio button
//
%radio,
radio
{
    // Unchecked states
    //
    -gtk-icon-source: url("../Resources/radio_unchecked.png");

    &:hover
    {
        -gtk-icon-source: url("../Resources/radio_unchecked_hover.png");
    }

    &:active
    {
        -gtk-icon-source: url("../Resources/radio_unchecked_press.png");
    }

    &:disabled
    {
        -gtk-icon-source: url("../Resources/radio_unchecked_inactive.png");
    }

    // Checked states (indeterminate has no theme in XP)
    //
    &:checked,
    &:indeterminate
    {
        -gtk-icon-source: url("../Resources/radio_checked.png");

        &:hover
        {
            -gtk-icon-source: url("../Resources/radio_checked_hover.png");
        }

        &:active
        {
            -gtk-icon-source: url("../Resources/radio_checked_press.png");
        }

        &:disabled
        {
            -gtk-icon-source: url("../Resources/radio_checked_inactive.png");
        }
    }
}

//
// Special cases (when the widget is inside OSD or a menu item)
//
check,
radio
{
    .osd &
    {
        @include button(osd);
        
        &:hover    { @include button(osd);             }
        &:active   { @include button(osd-active);      }
        &:backdrop { @include button(osd-backdrop);    }
        &:disabled { @include button(osd-insensitive); }
    }
    
    menu menuitem &
    {
        margin: 0px; // This is a workaround for a menu check/radio size allocation issue
        
        &,
        &:checked,
        &:indeterminate
        {
            // FIXME: Use button reset mixin
            //
            &, &:hover, &:disabled
            { 
                background-color: transparent;
                background-image: none;
                border-color:     currentColor;
                box-shadow:       none;
                color:            inherit;
                min-height:       13px;
                min-width:        13px;
                -gtk-icon-shadow: none;
            }
        }

        // In menus, use a different check mark
        //
        &,
        &:hover
        {
            -gtk-icon-source: none;
        }

        &:checked,
        &:indeterminate
        {
            &,
            &:disabled
            {
                -gtk-icon-source: url("../Resources/checkbox_check_glyph_menu.png");
            }

            &:hover
            {
                -gtk-icon-source: url("../Resources/checkbox_check_glyph_menu_hover.png");
            }
        }
    }
}
