/*****************
 * 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: v_color(text);
       background-image: none;
       background-color: transparent;
       border-style: none;
       box-shadow: none;

       &:hover {
         color: v_color(hover);
       }

       &:disabled {
         color: insensitive(v_color(text));
       }

       &:active {
         color: v_color(active);
         box-shadow: none;
       }

       &:backdrop {
         color: backdrop(v_color(text));
         background-color: transparent;
       }

       &:backdrop:disabled {
         color: backdrop(insensitive(v_color(text)));
         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: insensitive(v_color(text)); }

     &:backdrop:disabled { color: backdrop(insensitive(v_color(text))); }

     &: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: $border_color;
       padding: 0;
       border-radius: 0;
       &:disabled {
        color: insensitive(v_color(text));
        background-color: insensitive(v_color(normal));
        border-color: insensitive($border_color);
        }
       &:backdrop:disabled {
         color: backdrop(insensitive(v_color(text)));
         background-color: backdrop(insensitive(v_color(normal)));
         border-color: backdrop(insensitive($border_color));
        }
     }

     button {
       min-height: 26px;
       min-width: 26px;
       padding: 0;
       box-shadow: none;
       background-image: none;
       background-color: v_color(normal);
       color: v_color(text);
       border-color: $border_color;
       &:hover { color: v_color(hover);}
       &:active { color: v_color(active);}
       &:disabled {
        color: insensitive(v_color(text));
        background-color: insensitive(v_color(normal));
        border-color: insensitive($border_color);
        }
       &:backdrop:disabled {
         color: backdrop(insensitive(v_color(text)));
         background-color: backdrop(insensitive(v_color(normal)));
         border-color: backdrop(insensitive($border_color));
        }

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