@use '@beeline/design-tokens/scss/tokens/components/textarea' as *;
@use '@beeline/design-tokens/scss/tokens/components/formfield';
@use '@beeline/design-tokens/scss/tokens/themes';

.textarea-field {
  $px: 16px;

  display: block;
  width: 100%;
  position: relative;
  padding: $textarea-without-label-medium-text-margin-top $px $textarea-text-margin-bottom;
  height: $textarea-without-label-medium-height;
  background: formfield.$formfield-background-color;
  border: formfield.$formfield-border-width formfield.$formfield-border-style formfield.$formfield-border-color;
  border-radius: formfield.$formfield-border-radius;

  & &__label {
    position: absolute;
    top: $textarea-with-label-text-margin-top;
    left: $px;
    transition: font-size 300ms ease-out;
    color: formfield.$formfield-label-color;
  }

  & textarea {
    height: $textarea-medium-text-height;
    width: 100%;
    outline: none;
    border: none;
    box-shadow: none;
    resize: none;
    background-color: transparent;
    color: themes.$color-text-active;
  }

  & &__resizer {
    position: absolute;
    bottom: $textarea-resizer-margin-bottom;
    right: $textarea-resizer-margin-right;
    rotate: -45deg;
    width: 1em;
    height: 1em;

    &:hover {
      cursor: nwse-resize;
    }

    &::before {
      content: '';
      display: flex;
      background-color: darkslategrey;
      width: 10px;
      height: 1px;
    }

    &::after {
      content: '';
      display: flex;
      position: relative;
      right: -3px;
      bottom: -2px;
      background-color: darkslategrey;
      width: 4px;
      height: 1px;
    }
  }

  &.textarea-field--with-label {
    height: $textarea-with-label-medium-height;
    padding-top: $textarea-with-label-text-margin-top;

    &.textarea-field--floated .textarea-field__label {
      top: $textarea-medium-label-floated-margin-top;
      line-height: $textarea-small-label-floated-font-line-height;
      font-size: $textarea-small-label-floated-font-size;
    }

    &.textarea-field--small {
      height: $textarea-with-label-small-height;
      padding-top: $textarea-small-label-margin-top;
      top: $textarea-small-label-floated-margin-top;

      & .textarea-field__label {
        font-size: $textarea-small-label-font-size;
        font-weight: $textarea-small-label-font-weight;
        letter-spacing: $textarea-small-label-font-letter-spacing;
      }
    }
  }

  &.textarea-field--focused {
    border-color: formfield.$formfield-border-color-focus;
    background-color: transparent;
  }

  &.textarea-field--small {
    padding-top: $textarea-without-label-small-text-margin-top;
    height: $textarea-without-label-small-height;

    & textarea {
      height: $textarea-small-text-height;
    }
  }
}