@charset "UTF-8";

/*****************
 * GtkSpinButton *
 *****************/
 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;

     entry {
       min-width: 28px;
       // reset all the other props since the spinbutton node is styled here
       margin: 0;
       background: none;
       background-color: transparent;
       border: none;
       border-radius: 0;
       box-shadow: none;

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

     button {
       min-height: 16px;
       margin: 0;
       padding-bottom: 0;
       padding-top: 0;
       color: gtk("@theme_text_color");
       background-image: none;
       background-color: transparent;
       border-style: none;
       box-shadow: none;

       &:hover {
         color: gtk("@theme_view_hover_decoration_color");
       }

       &:disabled {
         color: gtk("@insensitive_base_fg_color");
       }

       &:active {
         color: gtk("@theme_view_active_decoration_color");
         box-shadow: none;
       }

       &:backdrop {
         color: gtk("@theme_unfocused_text_color");
         background-color: transparent;
       }

       &:backdrop:disabled {
         color: gtk("@theme_unfocused_view_text_color");
         background-color: transparent;
         border-style: none; // It is needed or it gets overridden
       }

       &:dir(ltr):last-child { border-radius: 0 3px 3px 0; }

       &:dir(rtl):first-child { border-radius: 3px 0 0 3px; }
     }
   }

   // 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: gtk("@insensitive_base_fg_color"); }

     &:backdrop:disabled { color: gtk("@theme_unfocused_view_text_color"); }

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

     entry {
       margin: 0px;
       min-height: 26px;
       min-width: 26px;
       border-style: none solid none solid;
       border-color: gtk("@borders");
       padding: 0;
       border-radius: 0;
       &:disabled {
        color: gtk("@insensitive_base_fg_color");
        background-color: gtk("@insensitive_base_color");
        border-color: gtk("@insensitive_borders");
        }
       &:backdrop:disabled {
         color: gtk("@theme_unfocused_view_text_color");
         background-color: gtk("@theme_unfocused_view_bg_color");
         border-color: gtk("@unfocused_insensitive_borders");
        }
     }

     button {
       min-height: 26px;
       min-width: 26px;
       padding: 0;
       box-shadow: none;
       background-image: none;
       background-color: gtk("@theme_base_color");
       color: gtk("@theme_base_fg_color");
       border-color: gtk("@borders");
       &:hover { color: gtk("@theme_view_hover_decoration_color");}
       &:active { color: gtk("@theme_view_active_decoration_color");}
       &:disabled {
        color: gtk("@insensitive_base_fg_color");
        background-color: gtk("@insensitive_base_color");
        border-color: gtk("@insensitive_borders");
        }
       &:backdrop:disabled {
         color: gtk("@theme_unfocused_view_text_color");
         background-color: gtk("@theme_unfocused_view_bg_color");
         border-color: gtk("@unfocused_insensitive_borders");
        }

       &.up {
         @extend %top_button;
        }

       &.down {
         @extend %bottom_button;
        }
     }

     %top_button {
       border-radius: 3px 3px 0 0;
       border-style: solid solid none solid;
     }

     %bottom_button {
       border-radius: 0 0 3px 3px;
       border-style: none solid solid solid;
     }
   }

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

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