@import '../../assets/styles/colors';
@import '../../assets/styles/rsfonts';

.input-container {
  display: flex;
  position: relative;
  flex-direction: column;
  .storybook-input {
    font-size: 12px;
    line-height: 0px !important;
    border-radius: 5px;
    background: $white;
    border: 1px solid $grey_2;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 2px;
    @extend .fontPoppinsRegularSm;

    &--isBackgroundTransparent {
      background: transparent;
    }

    &--primary {
      border-color: $grey_2;
      &:hover {
        outline: none;
        border: 1px solid $primary;
      }
      &:focus {
        outline: none;
        border: 1px solid $primary;
      }
      &:disabled {
        background-color: $grey_6;
      }
    }
    &--default {
      border-color: $grey_5;
      &:hover {
        outline: none;
        border: 1px solid $primary;
      }
      &:focus {
        outline: none;
        border: 1px solid $primary;
      }
      &:disabled {
        background-color: $grey_6;
      }
    }
    &--info {
      border-color: $grey_2;
      &:hover {
        outline: none;
        border: 1px solid $grey_2;
        box-shadow: none !important;
      }
      &:focus {
        outline: none;
        border: 1px solid $grey_2;
        box-shadow: none !important;
      }
      &:disabled {
        background-color: $grey_6;
      }
    }
    &--success {
      border-color: $success;
      &:hover {
        outline: none;
        border: 1px solid $success;
        box-shadow: none !important;
      }
      &:focus {
        box-shadow: none !important;
        outline: none;
        border: 1px solid $success;
      }
      &:disabled {
        background-color: $grey_6;
      }
    }
    &--warning {
      border-color: $warning;
      &:hover {
        box-shadow: none !important;
        outline: none;
        border: 1px solid $warning;
      }
      &:focus {
        box-shadow: none !important;
        outline: none;
        border: 1px solid $warning;
      }
      &:disabled {
        background-color: $grey_6;
      }
    }
    &--danger {
      border-color: $error;
      &:hover {
        box-shadow: none !important;
        outline: none;
        border: 1px solid $error;
      }
      &:focus {
        box-shadow: none !important;
        outline: none;
        border: 1px solid $error;
      }
      &:disabled {
        background-color: $grey_6;
      }
    }
  }

  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .arrow-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    justify-content: space-evenly;
    align-items: center;
    right: 8px;
    top: 53%;
    background: transparent;
    transform: translateY(-50%);

    &-label {
      top: 70%;
    }

    .option-icon {
      img {
        height: 10px;
        width: 10px;
      }
      &--arrow-up {
        transform: rotate(270deg);
        width: 7px;
      }

      &--arrow-down {
        transform: rotate(90deg);
        width: 7px;
      }
    }
  }

  .storybook-input-msg {
    @extend .fontPoppinsRegularXs8px;
    display: flex;
    align-items: center;
    &--primary {
      color: $success;
    }
    &--danger {
      color: $error;
    }
    &--warning {
      color: $warning;
    }
    &--info {
      color: $grey_4;
    }
    &--success {
      color: $success;
    }
  }
  .required-asterisk,
  .error-msg {
    color: $error;
  }
}