.wrapper {
  @apply tw-w-full tw-rounded-lg tw-max-w-xs tw-border tw-flex tw-flex-row tw-justify-between tw-items-center;
}

.input {
  @apply tw-w-full tw-h-8 tw-py-2 tw-px-3 tw-leading-none tw-text-base tw-font-semibold tw-text-gray-1 tw-bg-sov-white tw-duration-300 hover:tw-bg-gray-10;

  &::placeholder {
    @apply tw-text-gray-8;
  }

  &[value='']:not(:focus), &:not([value]):not(:focus) {
    @apply tw-bg-gray-9;
  }

  &:disabled {
    @apply tw-cursor-not-allowed tw-bg-gray-8 tw-text-gray-6;
  }

  &:read-only:not(:disabled) {
    @apply tw-bg-transparent tw-text-sov-white;
  }

  &[type='number'] {
    appearance: textfield;
    
    &[step] {
      @apply tw-pr-7;
    }

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }
}

.stepButton {
  @apply tw-absolute tw-right-1 tw-flex tw-items-center tw-justify-center tw-h-4 tw-w-6 
    tw-transition-opacity tw-duration-300 hover:tw-opacity-50;

  padding: 3px;

  & > span {
    @apply tw-w-0 tw-h-0;
  }

  &.up {
    @apply tw-top-0 tw-items-end;

    & > span {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid theme('colors.black');
    }
  }

  &.down {
    @apply tw-bottom-0 tw-items-start;

    & > span {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid theme('colors.black');
    }
  }
}
