spinbutton {
  @extend %entry;
  @extend .numeric;

  padding: 0;
  border-spacing: 0;

  /* :not here just to bump specificity above that of the list button styling */
  > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action),
  > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action) {
    margin: 0;
    background: none;
    border-style: solid;
    border-color: $thin_borders_color;
    border-radius: 0;
    box-shadow: none;
    color: inherit;

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

    &:active {
      background-color: $view_active_color;
    }
  }

  &:not(.vertical) {
    > text {
      min-width: 28px;
      padding: 6px;
    }

    /* :not here just to bump specificity above that of the list button styling */
    > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action),
    > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action) {
      min-height: 16px;
      min-width: 22px;
      padding-bottom: 0;
      padding-top: 0;
      border-width: 0 0 0 1px;

      &:dir(rtl) { border-width: 0 1px 0 0; }

      &: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 {
    > text {
      min-height: 30px;
      min-width: 30px;
    }

    /* :not here just to bump specificity above that of the list button styling */
    > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action),
    > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action) {
      &:last-child {
        border-width: 1px 0 0 0;
        border-radius: 0 0 $button_radius $button_radius;
      }

      &:first-child {
        border-width: 0 0 1px 0;
        border-radius: $button_radius $button_radius 0 0;
      }
    }
  }

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

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