/**
 * Textarea — PimentCSS v1
 */

@use "../abstracts/variables" as v;

.#{v.class-seg()}textarea-wrap {
  display: flex;
  flex-direction: column;
  gap: v.$space-1;
  max-width: 32rem;
}

.#{v.class-seg()}textarea-wrap__hint {
  margin: 0;
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-body);
}

.#{v.class-seg()}textarea-wrap__count {
  margin: 0;
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  color: var(--text-body);
}

.#{v.class-seg()}textarea-field {
  position: relative;
  display: flex;
  gap: v.$field-gap;
  align-items: flex-start;
  min-height: 8.75rem;
  padding: v.$field-padding-y v.$field-padding-x;
  background: var(--surface-primary);
  border: v.$border-width-1 solid var(--border-default);
  border-radius: v.$border-radius-4;
  transition: border-color v.$motion-duration-fast v.$motion-easing;

  &::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: v.$border-width-2 solid transparent;
    border-radius: v.$border-radius-6;
    pointer-events: none;
  }
}

.#{v.class-seg()}textarea {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  min-height: 6.5rem;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  color: var(--text-filled);
  resize: vertical;

  &::placeholder {
    color: var(--text-disabled);
  }

  &:focus {
    outline: none;
  }
}

.#{v.class-seg()}textarea-field__icon {
  flex-shrink: 0;
  width: v.$field-icon-size;
  height: v.$field-icon-size;
  color: var(--text-body);

  svg {
    width: 100%;
    height: 100%;
  }
}

.#{v.class-seg()}textarea-field:focus-within {
  border-color: var(--border-action-hover);

  &::after {
    border-color: var(--border-focus);
  }
}

.#{v.class-seg()}textarea-field__resize {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 10px;
  height: 11px;
  pointer-events: none;
  opacity: 0.45;
  background: linear-gradient(
    135deg,
    transparent 0 45%,
    var(--neutral-450) 45% 50%,
    transparent 50% 55%,
    var(--neutral-450) 55% 60%,
    transparent 60% 100%
  );
}

.#{v.class-seg()}textarea:disabled,
.#{v.class-seg()}textarea-field:has(.#{v.class-seg()}textarea:disabled) {
  background: var(--surface-muted);
  cursor: not-allowed;

  .#{v.class-seg()}textarea {
    color: var(--text-disabled);
    cursor: not-allowed;
  }
}

.#{v.class-seg()}textarea--error,
.#{v.class-seg()}textarea-field--error {
  border-color: var(--border-error);
}

.#{v.class-seg()}textarea--success,
.#{v.class-seg()}textarea-field--success {
  border-color: var(--border-success);
}