//
// Various button styles
//

// Stuff for .needs-attention
//
$_dot_color: if($variant == 'light', $selected_bg_color,
                                      lighten($selected_bg_color,15%));
@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, &
    {
        border:        1px solid;
        border-radius: $button_radius;
        min-height:    24px;
        min-width:     16px;
        padding:       $_btn_pad;
        transition:    $button_transition;

        @include button(normal);

        @at-root %button_basic_flat,
        &.flat
        {
            @include button(undecorated);
      
            // To avoid adjacent buttons borders clashing when transitioning, the
            // transition on the normal state is set to none, while it's added back in
            // the hover state, so the button decoration will fade in on hover, but it
            // won't fade out when the pointer leave the button allocation area. To
            // make the transition more evident in this case the duration is increased.
            //
            transition: none;

            &:hover
            {
                transition: $button_transition;
                transition-duration: 500ms;

                &:active
                {
                    transition: $button_transition;
                }
            }
        }

        &:hover
        {
            @include button(hover);

            -gtk-icon-effect: highlight;
        }

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

            transition-duration: 50ms;
        }

        &:backdrop
        {
            &.flat, &
            {
                @include button(backdrop);

                transition: $backdrop_transition;
                -gtk-icon-effect: none;

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

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

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

        @at-root %button_basic_flat,
        &.flat
        {
            &:backdrop,
            &:disabled,
            &:backdrop:disabled
            {
                @include button(undecorated);
            }
        }

        &:disabled
        {
            @include button(insensitive);

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

        &.image-button
        {
            min-width:     24px;
            padding-left:  $_img_btn_pad;
            padding-right: $_img_btn_pad;
        }

        &.text-button
        {
            padding-left:  16px;
            padding-right: 16px;
        }

        &.text-button.image-button
        {
            padding-left:  8px;
            padding-right: 8px;

            label
            {
                padding-left:  8px;
                padding-right: 8px;
            }
        }

        @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 &
        {
            @if $variant == 'light'
            {
                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: if($variant == 'light', $backdrop_base_color, $backdrop_fg_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);
            }
        }
    }

    // Suggested and Destructive Action buttons
    //
    @each $b_type, $b_color in (suggested-action, $suggested_bg_color),
                               (destructive-action, $destructive_color)
    {
        &.#{$b_type}
        {
            @include button(normal, $b_color, white);

            &.flat
            {
                @include button(undecorated);

                color: $b_color; //FIXME: does it work on the dark variant?
            }

            &:hover
            {
                @include button(hover, $b_color, white);
            }

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

            &:backdrop,
            &.flat:backdrop
            {
                @include button(backdrop, $b_color, white);

                &:active,
                &:checked
                {
                    @include button(backdrop-active, $b_color, white);
                }

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

                    &:active,
                    &:checked
                    {
                        @include button(backdrop-insensitive-active, $b_color, white);
                    }
                }
            }

            &.flat
            {
                &:backdrop,
                &:disabled,
                &:backdrop:disabled
                {
                    @include button(undecorated);

                    color: transparentize($b_color, 0.2);
                }
            }

            &:disabled
            {
                @include button(insensitive);

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

            .osd &
            {
                @include button(osd, $b_color);

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

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

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

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

    .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;
    }

    // Circular button
    //
    &.circular
    {
        border-radius:       9999px;
        padding:             $_circ_btn_pad;
        -gtk-outline-radius: 9999px;

        label
        {
            padding: 0;
        }

        // The following code is needed since we use a darker bottom border on
        // buttons, which looks pretty bad with a 100% border radius
        //     (see https://bugzilla.gnome.org/show_bug.cgi?id=771205 for details)
        //
        // On relevant states we an additional background-image with a gradient
        // clipped on the border-box, so setting a transparent border would reveal
        // it
        //
        $_border_bg: linear-gradient(to top, $alt-borders-color 25%, $borders-color 50%);

        &:not(.flat):not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop)
        {
            @include button(normal, $backimage: $_border_bg);

            border-color: transparent;
        }

        &:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop)
        {
            @include button(hover, $backimage: $_border_bg);

            border-color: transparent;
        }

        background-origin: padding-box, border-box;
        background-clip:   padding-box, border-box;
    }
}

%needs_attention
{
    animation:         needs_attention 150ms ease-in;
    $_dot_shadow:      _text_shadow_color();
    $_dot_shadow_r:    if($variant == 'light', 0.5, 0.45);
    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;

    @if $variant == 'light'
    {
        background-position: right 3px, right 4px;
    }
    @else
    {
        background-position: right 3px, right 2px;
    }

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

    &:dir(rtl)
    {
        @if $variant == 'light'
        {
            background-position: left 3px, left 4px;
        }
        @else
        {
            background-position: left 3px, left 2px;
        }
    }
}


// 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);
        }
    }

    &:backdrop
    {
        @include button(backdrop);

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

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

            &:active,
            &:checked
            {
                @include button(backdrop-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
{
    border-right-style:  none;
    border-radius:       0;
    -gtk-outline-radius: 0;
}

%linked_left
{
    border-top-left-radius:          $button_radius;
    border-bottom-left-radius:       $button_radius;
    -gtk-outline-top-left-radius:    $button_radius;
    -gtk-outline-bottom-left-radius: $button_radius;
}

%linked_right
{
    border-right-style:               solid;
    border-top-right-radius:          $button_radius;
    border-bottom-right-radius:       $button_radius;
    -gtk-outline-top-right-radius:    $button_radius;
    -gtk-outline-bottom-right-radius: $button_radius;
}

%linked_only_child
{
    border-style:        solid;
    border-radius:       $button_radius;
    -gtk-outline-radius: $button_radius;
}

// .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
{
    border-style:        solid solid none solid;
    border-radius:       0;
    -gtk-outline-radius: 0;
}

%linked_vertical_top
{
    border-top-left-radius:        $button_radius;
    border-top-right-radius:       $button_radius;
    -gtk-outline-top-left-radius:  $button_radius;
    -gtk-outline-top-right-radius: $button_radius;
}

%linked_vertical_bottom
{
    border-bottom-style:              solid;
    border-bottom-left-radius:        $button_radius;
    border-bottom-right-radius:       $button_radius;
    -gtk-outline-bottom-left-radius:  $button_radius;
    -gtk-outline-bottom-right-radius: $button_radius;
}

%linked_vertical_only_child
{
    border-style: solid;
    border-radius: $button_radius;
    -gtk-outline-radius: $button_radius;
}

%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
{
    padding: 4px;

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

        @if $variant == 'light'
        {
            box-shadow: 0 1px _text_shadow_color();

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

    @if $variant == 'light'
    {
        .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);
    }
}
