@import '@helsenorge/designsystem-react/scss/spacers';
@import '@helsenorge/designsystem-react/scss/breakpoints';
@import '@helsenorge/designsystem-react/scss/palette';
@import '@helsenorge/designsystem-react/scss/screen-reader';

/*** RESET ***/
textarea:required {
  box-shadow: none;
}

.safetextarea {
  &__textarea {
    position: relative;
    display: block;
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    font-weight: 400;
    padding: 0.75rem 1.125rem;
    width: 99%;
    border: 2px solid $neutral300;
    border-radius: 0;
    outline: none;
    appearance: none;
    overflow: auto;
    resize: vertical;

    &--state_validationerror {
      border: 2px solid $cherry600;
    }

    &--small {
      height: 10.5rem;

      @media only screen and (min-width: map-get($grid-breakpoints, md)) {
        height: 7rem;
      }
    }

    &--medium {
      height: 14rem;

      @media only screen and (min-width: map-get($grid-breakpoints, md)) {
        height: 11.3rem;
      }
    }

    &--large {
      height: 16rem;

      @media only screen and (min-width: map-get($grid-breakpoints, md)) {
        height: 14rem;
      }
    }

    @media print {
      display: none;
    }

    &:hover {
      background-color: $neutral50;
      border-color: $neutral400;
      box-shadow: 0 0 0 2px $neutral400;
    }

    &:focus,
    &:focus-within {
      border-color: $black;
      box-shadow: 0 0 0 2px $black;
    }
  }

  &__char-counter {
    text-align: right;
    z-index: 100;
    width: 99%;

    &__length {
      color: $kiwi900;

      &--invalid {
        color: $cherry600;
      }
    }

    &__hidden-text {
      @include sr-only;
    }
  }

  &__printable-textarea-content {
    font-size: 1.125rem;
    font-weight: 400;
    padding: 0.5rem;
    outline: none;
    width: 99%;
    border: 1px solid $neutral200;
    display: none;

    @media print {
      display: block;
    }
  }
}