.cabinet {
  .spinner_wrapper {
    .ui-spinner {
      display: inline-block;
      position: relative;
      height: 30px;

      .spinner {
        border: #cccccc 1px solid;
        color: #808080;
        font-size: 14px;
        outline: none;
        width: 100%;
        padding: 0 10px;
        height: 30px;

        &:focus {
          @include box-shadow(0, 0, 5px, #69badb);
          border: #69badb 1px solid;
        }
      }

      &-button {
        position: absolute;
        right: 0;
        display: table;
        width: 26px;
        height: 15px;
      }

      &-up {
        top: 0px;
        top: -6px\9\0;

        .ui-button-text {
          vertical-align: bottom;
        }

        .ui-icon {
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 4px 6px 4px;
          border-color: transparent transparent #8f9ea4 transparent;
        }
      }

      &-down {
        bottom: 0;
        bottom: 6px\9\0;

        .ui-button-text {
          vertical-align: top;
        }

        .ui-icon {
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 6px 4px 0 4px;
          border-color: #8f9ea4 transparent transparent transparent;
          top: 2px;
        }
      }

      .ui-button-text {
        display: table-cell;
        text-align: center;
        width: 100%;
        height: 100%;
        line-height: 15px;
      }

      .ui-icon {
        display: inline-block;
        font-size: 0px;
        text-align: center;
        position: relative;
      }
    }

    &.disabled {
      pointer-events: none;

      .spinner {
        border: #d6d9da 1px solid;
        background-color: #eef2f3;
      }
    }
  }
}