@use "../../assets/scss/mixins/_font-size.scss";
@use "./_keyframes.scss";

input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px var(--color-white) inset;
}

.bimdata-input {
  min-height: 32px;
  position: relative;
  font-family: var(--primary-font);
  color: var(--color-primary);
  font-size: font-size.calculateEm(15px);
  &.empty {
    label {
      top: 0;
      font-size: font-size.calculateEm(12px);
      color: var(--color-granite-light);
    }
  }
  input {
    padding: 0;
    width: 100%;
    height: 32px;
    border: none;
    display: flex;
    cursor: pointer;
    background-color: transparent;
    color: var(--color-primary);
    font-size: font-size.calculateEm(14px);
    &:focus {
      outline: none;
      & ~ label {
        top: -22px;
        font-size: font-size.calculateEm(10px);
      }
      & ~ .bar {
        &:after {
          width: 100%;
          transition: transform 0.2s cubic-bezier(0.55, 0, 0.55, 0.2);
          transform: scaleX(1);
        }
      }
    }
  }
  &__icon {
    position: absolute;
    right: 0;
    top: 8px;
  }
  label {
    position: absolute;
    left: 0;
    transform: translateY(8px);
    transition: 0.2s ease all;
    cursor: pointer;
    top: -22px;
    color: var(--color-primary);
    font-size: font-size.calculateEm(10px);
  }
  .bar {
    width: 100%;
    height: 1px;
    display: block;
    background: var(--color-silver);
    &::after,
    &::before {
      width: 0;
      height: 2px;
      content: "";
      display: block;
      position: absolute;
      background-color: var(--color-primary);
      transform: scaleX(0);
    }
  }
  &.loading input ~ .bar {
    &:after {
      width: 50%;
      animation: scaleX 2s linear infinite none;
      transform-origin: right;
    }
    &:before {
      width: 50%;
      animation: scaleX 2s linear 1s infinite none;
      transform-origin: right;
    }
  }
  .error {
    color: var(--color-high);
    font-size: font-size.calculateEm(11px);
  }
  .success {
    color: var(--color-success);
    font-size: font-size.calculateEm(11px);
  }
  &.disabled {
    opacity: 0.6;
  }
  &.error {
    label {
      color: var(--color-high);
    }
    .bar {
      background-color: var(--color-high);
      &::before,
      &::after {
        background-color: var(--color-high);
      }
    }
  }
  &.success {
    label {
      color: var(--color-success);
    }
    .bar {
      background-color: var(--color-success);
      &::before,
      &::after {
        background-color: var(--color-success);
      }
    }
  }
}