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

// Stuff for .needs-attention
//
$_dot_color: $selected_bg_color;

@keyframes needs_attention
{
    from {
        background-image: -gtk-gradient(
                              radial,
                              center center, 0,
                              center center, 0.01,
                              to($_dot_color),
                              to(transparent)
                          );
    }

    to
    {
        background-image: -gtk-gradient(
                              radial,
                              center center, 0,
                              center center, 0.5,
                              to($selected_bg_color),
                              to(transparent)
                          );
    }
}

%button,
button
{
    @at-root %button_basic, &
    {
        @include __wintc_apply_props_for_category(
            $button_styles,
            box-model
        );

        @include button(normal);

        &:focus
        {
            @include button(focus);
        }

        &:hover
        {
            @include button(hover);
        }

        &:active,
        &:checked
        {
            @include button(active);
        }

        &:disabled
        {
            @include button(insensitive);

            &:active,
            &:checked
            {
                @include button(insensitive-active);
            }
        }

        // NOTE: This is an addition for the TC, not part of Adwaita
        //
        &.toggle
        {
            @include __wintc_apply_props_for_category(
                $toggle_button_styles,
                box-model
            );

            @include button(toggle);

            &:focus
            {
                @include button(toggle-focus);
            }

            &:hover
            {
                @include button(toggle-hover);
            }

            &:checked
            {
                @include button(toggle-checked);

                &:focus
                {
                    @include button(toggle-checked-focus);
                }

                &:hover
                {
                    @include button(toggle-checked-hover);
                }

                &:active
                {
                    @include button(toggle-active);
                }
            }

            &:active
            {
                @include button(toggle-active);
            }

            &:disabled
            {
                @include button(toggle-insensitive);

                &:active,
                &:checked
                {
                    @include button(toggle-insensitive-checked);
                }
            }
        }

        @at-root %button_basic_flat,
        *:not(headerbar) &.flat
        {
            @include button(undecorated);

            &:focus,
            &:hover
            {
                @include button(flat-hover);
            }

            &:active,
            &:checked
            {
                @include button(flat-active);
            }

            &:disabled
            {
                @include button(flat-insensitive);
            }
        }

        &.image-button
        {
            min-width: 24px;
        }

        // NOTE: WinTC addition
        //
        &:not(.text-button)
        {
            &, &:active, &:checked:active
            {
                padding-left:  0px;
                padding-right: 0px;
            }
        }

        @at-root %button_basic_drop_active,
        &:drop(active)
        {
            border-color: $drop_target_color;
            box-shadow:   inset 0 0 0 1px $drop_target_color;
            color:        $drop_target_color;
        }
    }

    @at-root %button_selected, &
    {
        row:selected &
        {
            border-color: $selected_borders_color;
        }

        @at-root %button_selected_flat, &.flat
        {
            row:selected &
            {
                &:not(:active):not(:checked):not(:hover):not(disabled)
                {
                    border-color: transparent;
                    color:        $selected_fg_color;

                    &:backdrop
                    {
                        color: $backdrop_base_color;
                    }
                }
            }
        }
    }


    // Big standalone buttons like in Documents pager
    //
    &.osd
    {
        border-radius: 5px;
        color:         $osd_fg_color;
        min-height:    32px;
        min-width:     26px;

        &.image-button { min-width: 34px; }

        @include button(osd);

        // Overrides
        //
        border:     none;
        box-shadow: none;

        &:hover
        {
            @include button(osd-hover);

            border:     none;
            box-shadow: none;
        }

        &:active,
        &:checked
        {
            @include button(osd-active);

            border:     none;
            box-shadow: none;
        }

        &:disabled
        {
            &:backdrop,
            &
            {
                @include button(osd-insensitive);

                border: none;
            }
        }

        &:backdrop
        {
            @include button(osd-backdrop);

            border: none;
        }
    }

    // Overlay / OSD style
    //
    @at-root %osd_button,
    .osd &
    {
        @include button(osd);

        &:hover
        {
            @include button(osd-hover);
        }

        &:active,
        &:checked
        {
            &:backdrop, &
            {
                @include button(osd-active);
            }
        }

        &:disabled
        {
            &:backdrop, &
            {
                @include button(osd-insensitive);
            }
        }

        &:backdrop
        {
            @include button(osd-backdrop);
        }

        &.flat
        {
            @include button(undecorated);

            box-shadow:       none; //FIXME: respect no edge on the button mixin
            text-shadow:      0 1px black;
            -gtk-icon-shadow: 0 1px black;

            &:hover
            {
                @include button(osd-hover);
            }

            &:disabled
            {
                @include button(osd-insensitive);

                background-image: none;
                border-color:     transparent;
                box-shadow:       none;
            }

            &:backdrop
            {
                @include button(undecorated);
            }

            &:active,
            &:checked
            {
                @include button(osd-active);
            }
        }
    }

    .stack-switcher > &
    {
        // To position the needs attention dot, padding is added to the button
        // child, a label needs just lateral padding while an icon needs vertical
        // padding added too.
        //
        outline-offset: -3px; // Needs to be set or it gets overriden by GtkRadioButton outline-offset

        > label
        {
            padding-left:  6px; // Label padding
            padding-right: 6px; //
        }

        > image
        {
            padding-left:   6px; // Image padding
            padding-right:  6px; //
            padding-top:    3px; //
            padding-bottom: 3px; //
        }

        &.text-button
        {
            // Compensate text-button paddings
            //
            padding-left:  10px;
            padding-right: 10px;
        }

        &.image-button
        {
            // We want image buttons to have a 1:1 aspect ratio, so compensation
            // of the padding added to the GtkImage is needed
            //
            padding-left:  2px;
            padding-right: 2px;
        }

        &.needs-attention
        {
            > label,
            > image
            {
                @extend %needs_attention;
            }

            &:active,
            &:checked
            {
                > label,
                > image
                {
                    animation:        none;
                    background-image: none;
                }
            }
        }
    }

    // Hide separators
    //
    &.font,
    &.file
    {
        separator
        {
            background-color: transparent;
        }
    }

    &.font
    {
        > box > box > label
        {
            font-weight: bold;
        }
    }

    // Inline-toolbar buttons
    //
    .inline-toolbar &
    {
        @extend %linked;
    }

    .primary-toolbar &
    {
        -gtk-icon-shadow: none; // Tango icons don't need shadows
    }

    .linked > &
    {
        @extend %linked;
    }

    .linked.vertical > &
    {
        @extend %linked_vertical;
    }

    //
    // NOTE: WinTC - removed circular button class styling
    //
}

%needs_attention
{
    animation:         needs_attention 150ms ease-in;
    $_dot_shadow:      _text_shadow_color();
    $_dot_shadow_r:    0.5;
    background-image:  -gtk-gradient(
                           radial,
                           center center, 0,
                           center center, 0.5,
                           to($_dot_color),
                           to(transparent)
                       ),
                       -gtk-gradient(
                           radial,
                           center center, 0,
                           center center, $_dot_shadow_r,
                           to($_dot_shadow),
                           to(transparent)
                       );
    background-size:   6px 6px, 6px 6px;
    background-repeat: no-repeat;
    background-position: right 3px, right 4px;

    &:backdrop
    {
        background-size: 6px 6px, 0 0;
    }

    &:dir(rtl)
    {
        background-position: left 3px, left 4px;
    }
}


// All the following is for the +|- buttons on inline toolbars, that way
// should really be deprecated...
//
//.inline-toolbar toolbutton > button
//{
    // Redefining the button look is needed since those are flat...
    //
//    @include button(normal);

//    &:hover
//    {
//        @include button(hover);
//    }

//    &:active,
//    &:checked
//    {
//        @include button(active);
//    }

//    &:disabled
//    {
//        @include button(insensitive);

//        &:active,
//        &:checked
//        {
//            @include button(insensitive-active);
//        }
//    }
//}

// More inline toolbar buttons
//
toolbar.inline-toolbar toolbutton
{
    > button.flat
    {
        @extend %linked_middle;
    }

    &:first-child > button.flat
    {
        @extend %linked_left;
    }

    &:last-child > button.flat
    {
        @extend %linked_right;
    }

    &:only-child > button.flat
    {
        @extend %linked_only_child;
    }
}

%linked_middle
{
    margin-left: 2px;
    margin-right: 2px;
}

%linked_left
{
    margin-left: 0px;
}

%linked_right
{
    margin-right: 0px;
}

%linked_only_child
{
    margin-left: 0px;
    margin-right: 0px;
}

// .linked assumes Box, which reverses nodes in RTL, so 1st child is always left
//
%linked
{
    @extend %linked_middle;

    &:first-child { @extend %linked_left;       }
    &:last-child  { @extend %linked_right;      }
    &:only-child  { @extend %linked_only_child; }
}

// Other widgets use widget child order, so 1st/last child are at text start/end
//
%linked_flippable
{
    @extend %linked_middle;

    &:dir(ltr)
    {
        &:first-child { @extend %linked_left;  }
        &:last-child  { @extend %linked_right; }
    }

    &:dir(rtl)
    {
        &:first-child { @extend %linked_right; }
        &:last-child  { @extend %linked_left;  }
    }

    &:only-child
    {
        @extend %linked_only_child;
    }
}

%linked_vertical_middle
{
    margin-bottom: 2px;
    margin-top: 2px;
}

%linked_vertical_top
{
    margin-top: 0px;
}

%linked_vertical_bottom
{
    margin-bottom: 0px;
}

%linked_vertical_only_child
{
    margin-bottom: 0px;
    margin-top: 0px;
}

%linked_vertical
{
    @extend %linked_vertical_middle;

    &:first-child { @extend %linked_vertical_top;        }
    &:last-child  { @extend %linked_vertical_bottom;     }
    &:only-child  { @extend %linked_vertical_only_child; }
}

%undecorated_button
{
    background-color: transparent;
    background-image: none;
    border-color: transparent;
    box-shadow: inset 0 1px transparentize(white, 1),
                0 1px transparentize(white, 1);
    text-shadow: none;
    -gtk-icon-shadow: none;
}

// Menu buttons
//
modelbutton.flat,
.menuitem.button.flat
{
    min-height:     26px;
    padding-left:   5px;
    padding-right:  5px;
    border-radius:  $button_radius;
    outline-offset: -2px;

    @extend %undecorated_button;

    &:hover
    {
        background-color: $popover_hover_color;
    }

    &:selected
    {
        @extend %selected_items;
    }

    &:backdrop,
    &:backdrop:hover
    {
        @extend %undecorated_button;
    }
}

modelbutton.flat arrow
{
    background: none;

    &:hover
    {
        background: none;
    }

    &.left
    {
        -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
    }

    &.right
    {
        -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
    }
}

button.color
{
    colorswatch:only-child
    {
        &, overlay
        {
            border-radius: 0;
        }

        box-shadow: 0 1px _text_shadow_color();

        .osd &
        {
            box-shadow: none;
        }
    }

    .osd &, &
    {
        &:disabled,
        &:backdrop,
        &:active,
        &:checked
        {
            colorswatch:only-child
            {
                box-shadow: none;
            }
        }
    }
}

// List buttons
//
// (tone down as per new designs, see issue #1473, #1478)
//
list row button.image-button:not(.flat)
{
    @extend %undecorated_button;

    border: 1px solid transparentize($borders_color, 0.5);

    &:hover
    {
        @include button(hover);
    }

    &:active,
    &:checked
    {
        @include button(active);
    }
}

buttonbox.dialog-action-area button
{
    padding: 3px 0px;
}
