.Container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: max-content;
  /* Allows the `resize` property to work on the div */
  overflow: hidden;

  &_fullWidth{
    width: 100%;
  }
}

.Area {
  background: $color-white;
  border: 1px solid $color-darkgray;
  border-radius: rem(20px);
  padding: rem(10px) rem(24px);
  transition: border ease .5s;

  font-family: $font-open-sans;
  font-weight: $font-regular;
  font-size: rem(18px);
  line-height: 100%;
  color: $color-text;

  resize: none;
  display: block;
  width: 100%;
  flex-grow: 1;

  @include iftablet{
    font-size: rem(18px);
  }

  @include iflaptop{
    font-size: rem(20px);
    padding: rem(10px) rem(20px);
  }

  @include ifdesktop{
    font-size: rem(24px);
  }

  /* scrollbar */
  & {
    /* Arrow mouse cursor over the scrollbar */
    cursor: auto;
  }
  &::-webkit-scrollbar {
    width: rem(12px);
    height: rem(12px);
  }
  &::-webkit-scrollbar-track,
  &::-webkit-scrollbar-thumb {
    background-clip: content-box;
    border: rem(4px) solid transparent;
    border-radius: rem(12px);
  }
  &::-webkit-scrollbar-track {
    background-color: #333; // цвет дорожки
  }
  &::-webkit-scrollbar-thumb {
    background-color: #999; // цвет указателя
  }
  @media (hover: hover) {
    :where(&:not(:disabled))::-webkit-scrollbar-thumb:hover {
      background-color: #999;
    }
  }
  &:where(:autofill) {
    /* Reliably removes native autofill colors */
    background-clip: text;
    -webkit-text-fill-color: #999;
  }


  &:focus {
    border-color: $color-orange;
    transition: border-color ease .5s;
  }

  &:hover {
    border-color: $color-text;
    transition: border-color ease .5s;
  }

  &:focus:hover {
    border-color: $color-orange;
    transition: border-color ease .5s;
  }

  &:focus-visible {
    outline: none;
  }

  &_ghost {
    background: transparent;
    color: $color-white;

    &:focus {
      border-color: $color-orange;
      transition: border-color ease .5s;
    }

    &:hover {
      border-color: $color-white;
      transition: border-color ease .5s;
    }

    &:focus:hover {
      border-color: $color-orange;
      transition: border-color ease .5s;
    }
  }
}