[dir='rtl'] select,
select[dir='rtl'] {
  background-position: left 0.5rem center;
}

.input {
  @apply bg-transparent w-full rounded-lg border border-line h-12 px-3 py-0 appearance-none font-normal text-base flex items-center placeholder:text-content-super-dimmed;

  &:disabled {
    @apply bg-line-dimmed cursor-not-allowed opacity-50;
  }
}

select.input {
  @apply pe-8 cursor-pointer;
}

/* Textarea */
textarea.input {
  @apply min-h-[48px] resize-y h-auto py-3;
}

.autogrow-textarea {
  @apply grid after:whitespace-pre-wrap after:invisible after:row-start-1 after:col-start-1 after:row-end-2 after:col-end-2;

  &:after {
    content: attr(data-replicated-value) ' ';
  }

  & > textarea {
    @apply resize-none overflow-hidden row-start-1 col-start-1 row-end-2 col-end-2;
    font: inherit;
  }
}

/* Radio inputs */
input[type='radio'].radio-button {
  @apply hidden;

  & + span {
    @apply inline-flex px-3 py-1 border rounded-lg cursor-pointer border-line hover:border-content;
  }

  &:checked + span {
    @apply bg-button border-button text-button-content cursor-default;
  }

  &:disabled + span {
    @apply border-line-dimmed cursor-not-allowed opacity-75;
  }
}

/* Styles */
.input-dimmed {
  @apply bg-button-dimmed text-button-dimmed-content;
}

/* Sizes */
.input-sm,
.input-xs {
  @apply h-9 px-3 text-sm rounded-md;
}

.input-xs {
  @apply h-6 px-1.5;
}