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

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

.bimdata-textarea {
  margin: var(--spacing-unit) 0;
  position: relative;
  inline-size: min-content;
  font-family: var(--primary-font);
  color: var(--color-primary);
  font-size: font-size.calculateEm(15px);
  textarea {
    padding: 0px;
    width: 100%;
    min-width: inherit;
    max-width: 100%;
    min-height: inherit;
    display: flex;
    margin: 0px;
    color: var(--color-primary);
    font-family: var(--primary-font);
    border: none;
    &:disabled {
      background-color: transparent;
      & ~ label {
        color: var(--color-silver-dark);
        cursor: default;
      }
    }
    &:focus {
      outline: none;
      & ~ label {
        top: -26px;
        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);
        }
      }
    }
  }
  &.not-empty {
    label {
      top: -26px;
      color: var(--color-primary);
      font-size: font-size.calculateEm(10px);
    }
  }
  label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: font-size.calculateEm(12px);
    transform: translateY(8px);
    transition: 0.2s ease all;
    color: var(--color-granite-light);
    cursor: pointer;
  }
  .bar {
    width: 100%;
    height: 1px;
    display: block;
    background: var(--color-silver);
    &::after {
      width: 0;
      height: 2px;
      content: "";
      display: block;
      position: absolute;
      background-color: var(--color-primary);
      transform: scaleX(0);
    }
  }
  .error {
    color: var(--color-high);
    font-size: font-size.calculateEm(11px);
  }
  .success {
    color: var(--color-success);
    font-size: font-size.calculateEm(11px);
  }
  &.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);
      }
    }
  }
}