@import "tailwindcss/theme";
@import "../variables/theme.css";

.inputText {
  @apply space-y-8;

  &:has([type="search"]) {
    @apply relative;
  }

  &:has([type="search"]) .inputText-input {
    padding-right: var(--spacing-40);
  }

  &:has([type="search"])::after {
    @apply pointer-events-none absolute;

    top: var(--spacing-8);
    right: var(--spacing-8);
    width: var(--spacing-24);
    height: var(--spacing-24);
    content: "";
    background: url("../../images/icon-search-page.svg") 0 0 /100% no-repeat;
  }
}

.inputText-input {
  width: 100%;
  height: 40px;
  padding: 8px;
  font: var(--t4-medium);
  color: var(--color-neutral-100);
  appearance: none;
  cursor: pointer;
  caret-color: var(--color-neutral-100);
  box-shadow: inset 0 -1px 0 0 var(--color-neutral-100);

  &:placeholder-shown,
  &:invalid {
    color: --alpha(var(--color-neutral-100) / 60%);
  }

  &:focus {
    outline: none;
  }
}

.inputText-input--textarea {
  @apply cursor-text;

  height: var(--textarea-height, 40px);
  overflow: hidden;
  resize: none;
}

.inputText-input--select {
  padding-right: var(--spacing-40);

  & > * {
    color: var(--color-black);
  }

  &:has(option[value=""]:checked),
  &:has(option:not([value]):checked) {
    color: --alpha(var(--color-neutral-100) / 30%);
  }
}

.inputText-input--page {
  @apply bg-white;

  color: var(--color-neutral-900);
  caret-color: var(--color-neutral-900);
  box-shadow: inset 0 -1px 0 0 var(--color-neutral-900);

  &:placeholder-shown,
  &:invalid {
    color: --alpha(var(--color-neutral-900) / 60%);
  }

  &:has(option[value=""]:checked),
  &:has(option:not([value]):checked) {
    color: --alpha(var(--color-neutral-900) / 30%);
  }
}

.inputText-select {
  @apply relative;

  &:has(.inputText-input--page) .inputText-selectIcon {
    --icon-color: var(--color-neutral-900);
  }
}

.inputText-selectIcon {
  --icon-color: var(--color-neutral-100);

  @apply pointer-events-none absolute;

  top: 50%;
  right: var(--spacing-8);
  transform: translateY(-50%);
}

.inputText-description {
  font: var(--t5-medium);
  color: --alpha(var(--color-white) / 60%);
}

.inputText-error {
  padding: 6px var(--spacing-16);
  font: var(--t5-medium);
  color: var(--color-white);
  background: var(--color-other-error);
}