sparkletown/sparkle

@import "scss/constants";

.AdminTextarea {
  margin-top: $spacing--xs;
  margin-bottom: $spacing--xs;

  &__input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 100%;
    padding: $spacing--md;
    border-radius: $border-radius--xl;
    border: $border-width--bold solid transparent;
    color: $content--over;
    background-color: var(--content--over-10a);
    outline: none;
    cursor: text;
    text-align: center;
    font-size: font-size--parent(1);

    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:active,
    &:-webkit-autofill:focus {
      background-color: transparent;
    }

    &:hover {
      background-color: var(--content--over-20a);
    }

    &:focus {
      box-shadow: box-shadow--input(var(--content--over-80a));
    }
  }

  &__error,
  &__subtext {
    display: block;
  }

  &__error {
    color: var(--danger--under);
  }

  &__subtext {
    margin: 0;
    padding: 0;
    color: var(--content--over-50a);
  }

  &--disabled &__input {
    color: var(--content--over-60a);
  }

  &--invalid &__input {
    border: $border-width--bold solid var(--danger--under-darker-10pp);
  }

  &--invalid &__input:focus {
    border: $border-width--bold solid var(--danger--under-80a);
    box-shadow: box-shadow--input(var(--danger--under-80a));
  }
}