@use 'sass:map';
@use '../../settings/_colors.scss';
@use '_mixins.scss';

.a-input {
  font-weight: 400;

  /**
   * 1. Override border bottom height.
   * 2. Disable border bottom animation.
   * 3.a. Textarea border bottom.
   * 3.b. Textarea border on hover.
   * 3.c. Textarea border on focus.
   */
  .v-input__control > .v-input__slot {
    &:before {
      border-top-width: 1px;
    }

    &:after {
      transition: unset;
    }
  }

  .v-label.v-field-label--floating {
    .a-label-secondary {
      font-size: 10.5px !important;
    }
  }
}
.fake-input {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
  padding-top: 12px;
  margin-top: 4px;
  pointer-events: none;
  flex: 1 1 auto;
  font-size: 16px;
  text-align: left;
  display: flex;
  align-items: flex-start;
  min-height: inherit;
  position: relative;

  &__label {
    left: 0px;
    right: auto;
    position: absolute;
    transform: translateY(-18px) scale(0.75);
    overflow: hidden;
    text-overflow: ellipsis;
    top: 15px;
    transform-origin: top left;
    white-space: nowrap;
    max-width: 133%;
  }

  &__box {
    width: 100%;
    padding-bottom: 20px;
    position: relative;
    display: flex;
    align-items: baseline;
    overflow: hidden;

    &:before {
      content: '';
      border-image: repeating-linear-gradient(
          to right,
          rgba(255, 255, 255, 0.5) 0px,
          rgba(255, 255, 255, 0.5) 2px,
          transparent 2px,
          transparent 4px
        )
        1 repeat;
      border-color: rgba(255, 255, 255, 0.7);
      border-style: solid;
      border-width: thin 0 0 0;
      border-top-width: 1px;
      left: 0;
      position: absolute;
      transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
      width: 100%;
      top: 31px;
    }
  }

  &__value {
    line-height: 32px;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;

    &--rate {
      font-style: italic;
      padding-left: 3px;
      color: inherit !important;
    }
  }
}
.v-theme--light {
  .a-input {
    .v-label {
      color: map.get(colors.$adm-colors, 'muted');
    }

    .v-label.v-label--active {
      color: map.get(colors.$adm-colors, 'muted') !important;
    }

    .v-label--is-disabled {
      color: map.get(colors.$adm-colors, 'muted');
    }

    &.v-input--is-disabled {
      input,
      textarea {
        color: map.get(colors.$adm-colors, 'muted');
      }
    }

    &:not(.v-input--is-disabled) {
      input,
      textarea {
        color: map.get(colors.$adm-colors, 'regular');
        caret-color: map.get(colors.$adm-colors, 'primary2');
      }
    }

    &.v-select .v-select__selections {
      color: map.get(colors.$adm-colors, 'regular');
    }

    .v-input__control > .v-input__slot:before {
      border-color: rgba(0, 0, 0, 0.12);
    }

    &:not(.v-input--has-state) > .v-input__control > .v-input__slot:hover:before {
      border-color: map.get(colors.$adm-colors, 'primary2');
    }

    &.v-input--is-focused > .v-input__control > .v-input__slot:after {
      border-color: map.get(colors.$adm-colors, 'primary2');
      border-width: thin 0 0 0;
    }
  }

  .fake-input {
    color: rgba(0, 0, 0, 0.54);
  }

  .fake-input__box:before {
    border-image: repeating-linear-gradient(
        to right,
        rgba(0, 0, 0, 0.38) 0px,
        rgba(0, 0, 0, 0.38) 2px,
        transparent 2px,
        transparent 4px
      )
      1 repeat;
  }
}
.v-theme--dark {
  .a-input {
    &:not(.v-input--is-disabled) {
      input,
      textarea {
        caret-color: map.get(colors.$adm-colors, 'primary');
      }
    }
  }
}
