@use '../../tokens';
@use '../../utils';

/// get component token
@function _token($token) {
  @return utils.map-get(tokens.$flexy-comp-textfield, $token);
}

.flexy-textfield {
  &__outlined {
    --outline-width: #{_token('enabled-outline-width')};
    --outline-color: #{_token('enabled-outline-color')};

    display: flex;
    box-sizing: border-box;
    border-radius: _token('container-shape');
    outline-style: none !important;
    pointer-events: none;
    @include utils.absolute-fill();

    &::before,
    &::after,
    &-notch {
      content: '';
      border-color: var(--outline-color);
      border-width: var(--outline-width);
      box-sizing: border-box;
      height: 100%;
    }

    &::before {
      border-top-left-radius: inherit;
      border-bottom-left-radius: inherit;
      border-style: solid none solid solid;
      width: 100%;
    }

    &::after {
      border-top-right-radius: inherit;
      border-bottom-right-radius: inherit;
      border-style: solid solid solid none;
      width: 100%;
    }

    &-notch {
      display: flex;
      border-style: none none solid none;
      position: relative;

      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 0;
        width: calc(50% + 2px);
        border-color: var(--outline-color);
        border-width: var(--outline-width);
        border-bottom-style: solid;
        transition: transform _token('label-floating-transition-duration')
          _token('label-floating-transition-easing');
      }

      &::before {
        left: -1px;
        transform-origin: left center;
      }

      &::after {
        right: -1px;
        transform-origin: right center;
      }
    }
  }

  &__outlined &__floating-label {
    font-size: calc(1em * _token('label-floating-scale'));
    padding-left: 4px;
    padding-right: 4px;
    transform: translateY(calc(-50% + (_token('container-height') / 2)))
      scale(calc(1 / _token('label-floating-scale')));
  }

  &--with-floating-label &__outlined::before {
    flex-shrink: 0;
    width: calc(_token('container-padding') - 4px / 0.75);
  }

  &--with-leading-icon &__outlined::before {
    width: calc(
      _token('icon-leading-margin') + _token('icon-size') +
        _token('icon-leading-spacing') - 4px / _token('label-floating-scale')
    );
  }

  &:hover &__outlined {
    --outline-color: #{_token('hovered-outline-color')};
  }

  & input:focus ~ &__outlined {
    --outline-color: #{_token('focused-outline-color')};
    --outline-width: #{_token('focused-outline-width')};
  }

  & input:invalid ~ &__outlined {
    --outline-color: #{_token('invalid-outline-color')};
  }

  // open a small window between border to place the floating label
  & input:focus ~ &__outlined &__outlined-notch::before,
  & input:focus ~ &__outlined &__outlined-notch::after,
  & input:not(:placeholder-shown) ~ &__outlined &__outlined-notch::before,
  & input:not(:placeholder-shown) ~ &__outlined &__outlined-notch::after {
    transform: scaleX(0);
  }

  & input:focus ~ &__outlined &__floating-label,
  & input:not(:placeholder-shown) ~ &__outlined &__floating-label {
    transform: translateY(-20%);
  }
}