//
// Spin button styles
//

spinbutton
{
    &:not(.vertical)
    {
        // In this horizontal configuration, the whole spinbutton
        // behaves as the entry, so we extend the entry styling
        // and nuke the style on the internal entry
        //
        @extend %entry;

        padding: 0;

        %spinbutton_horz_entry
        {
            min-width: 28px;

            // Reset all the other props since the spinbutton node is styled here
            //
            background:       none;
            background-color: transparent;
            border:           none;
            border-radius:    0;
            box-shadow:       none;
            margin:           0;

            &:backdrop:disabled
            {
                background-color: transparent;
            }
        }

        entry
        {
            @extend %spinbutton_horz_entry;
        }

        button
        {
            background-image: none;
            border-color:     transparentize($borders_color, 0.7);
            border-radius:    0;
            border-style:     none none none solid;
            box-shadow:       none;
            color:            mix($fg_color, $base_color, 90%);
            margin:           0;
            min-height:       16px;
            padding-bottom:   0;
            padding-top:      0;

            &:dir(rtl)
            {
                border-style: none solid none none;
            }

            &:hover
            {
                background-color: $base_hover_color;
                color:            $fg_color;
            }

            &:disabled
            {
                background-color: transparent;
                color:            transparentize($insensitive_fg_color, 0.7);
            }

            &:active
            {
                background-color: transparentize(black, 0.9);
                box-shadow:       inset 0 2px 3px -1px transparentize(black, 0.8);
            }

            &:backdrop
            {
                background-color: transparent;
                border-color:     transparentize($backdrop_borders_color, 0.7);
                color:            mix($backdrop_fg_color, $backdrop_base_color, 90%);
                transition:       $backdrop_transition;
            }

            &:backdrop:disabled
            {
                background-color: transparent;
                background-image: none;
                border-style:     none none none solid; // It is needed or it gets overridden
                color:            transparentize($backdrop_insensitive_color,0.7);

                &:dir(rtl) { border-style: none solid none none; }
            }

            &:dir(ltr):last-child  { border-radius: 0 $button_radius $button_radius 0; }
            &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; }
        }
    }

    // OSD horizontal
    //
    .osd &:not(.vertical)
    {
        entry
        {
            @extend %spinbutton_horz_entry;
        }

        button
        {
            @include button(undecorated);

            border-style:     none none none solid;
            border-color:     transparentize($osd_borders_color, 0.3);
            border-radius:    0;
            box-shadow:       none;
            color:            $osd_fg_color;
            -gtk-icon-shadow: 0 1px black;

            &:dir(rtl)
            {
                border-style: none solid none none;
            }

            &:hover
            {
                @include button(undecorated);

                background-color: transparentize($osd_fg_color, 0.9);
                border-color:     transparentize(opacify($osd_borders_color, 1), 0.5);
                box-shadow:       none;
                color:            $osd_fg_color;
                -gtk-icon-shadow: 0 1px black;
            }

            &:backdrop
            {
                @include button(undecorated);

                border-color:     transparentize(opacify($osd_borders_color, 1), 0.5);
                box-shadow:       none;
                color:            $osd_fg_color;
                -gtk-icon-shadow: none;
            }

            &:disabled
            {
                @include button(undecorated);

                border-color:     transparentize(opacify($osd_borders_color, 1), 0.5);
                box-shadow:       none;
                color:            $osd_insensitive_fg_color;
                -gtk-icon-shadow: none;

            }
            
            &:dir(ltr):last-child  { border-radius: 0 $button_radius $button_radius 0; }
            &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; }
        }
    }

    // Vertical
    //
    &.vertical
    {
        // In the vertical configuration, we treat the spinbutton
        // as a box, and tweak the style of the entry in the middle
        // so that it's linked
        //

        // FIXME: this should not be set at all, but otherwise it gets the wrong
        // color
        //
        &:disabled
        {
            color: $insensitive_fg_color;
        }

        &:backdrop:disabled
        {
            color: $backdrop_insensitive_color;
        }

        &:drop(active)
        {
            border-color: transparent;
            box-shadow:   none;
        }

        entry
        {
            border-radius: 0;
            min-height:    32px;
            min-width:     32px;
            padding:       0;
        }

        button
        {
            min-height: 32px;
            min-width: 32px;
            padding: 0;

            &.up   { @extend %top_button;    }
            &.down { @extend %bottom_button; }
        }

        %top_button
        {
            border-radius: $button_radius $button_radius 0 0;
            border-style:  solid solid none solid;
        }

        %bottom_button
        {
            border-radius: 0 0 $button_radius $button_radius;
            border-style:  none solid solid solid;
        }
    }

    // OSD vertical
    //
    .osd &.vertical button:first-child
    {
        @include button(osd);

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

    // Misc
    //
    treeview &:not(.vertical)
    {
        border-radius: 0;
        border-style: none;
        min-height: 0;

        entry
        {
            min-height: 0;
            padding: 1px 2px;
        }
    }

    font-feature-settings: "tnum";
}
