@use '@mezzanine-ui/system/palette';
@use '@mezzanine-ui/system/radius';
@use '@mezzanine-ui/system/spacing';
@use '@mezzanine-ui/system/transition';
@use '@mezzanine-ui/system/typography';
@use './textarea' as *;

.#{$prefix}.#{$prefix} {
  @include typography.semantic-variable(body);
}

.#{$prefix} {
    padding: 0;
    width: fit-content;
    height: fit-content;

  &__textarea {
    appearance: none;
    padding-block: spacing.semantic-variable(padding, vertical, calm);
    padding-left: spacing.semantic-variable(padding, horizontal, cozy);
    padding-right: spacing.semantic-variable(padding, horizontal, spacious);
    min-width: spacing.semantic-variable(size, container, snug);

    &::-webkit-scrollbar {
      width: calc(spacing.semantic-variable(size, element, tight) + spacing.semantic-variable(gap, tight) * 2);
    }

    &::-webkit-scrollbar-thumb {
      background-color: palette.semantic-variable("background", neutral-subtle);
      background-clip: content-box;
      border: spacing.semantic-variable(gap, tight) solid transparent;
      border-radius: radius.variable(full);
      cursor: pointer;
      transition: transition.exit(background-color, fast);

      &:hover {
        background-color: palette.semantic-variable("scrollbar", strong);
        transition: transition.entrance(background-color, fast);
      }
    }

    &::-webkit-resizer {
      background-color: transparent;
    }
  }

  &__resizer {
    position: absolute;
    right: 0;
    bottom: 0;
    width: spacing.semantic-variable(size, element, base);
    height: spacing.semantic-variable(size, element, base);
    color: palette.semantic-variable(icon, neutral);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}