@use 'colours';
@use 'responsive';
@use 'typography';

// with pull tab
.text-area-wrap {
  position: relative;
  display: inline-block;
  width: 425px;

  @include responsive.not-desktop {
    width: 100%;
    max-width: 425px;
  }

  textarea {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 170px;
    border: 2px solid colours.$colour-textinput-border;
    color: colours.$colour-textinput-text;
    padding: 12px 18px;
    outline: none;
    background-color: colours.$colour-textinput-bg;
    resize: vertical;
    overflow: auto;

    &:focus {
      border-color: colours.$colour-textinput-text-active;
      background-color: unset;
    }

    // placeholder text
    ::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: colours.$colour-textinput-text;
      overflow: visible;
    }
    ::-moz-placeholder {
      /* Firefox 19+ */
      color: colours.$colour-textinput-text;
      overflow: visible;
    }
    :-ms-input-placeholder {
      /* IE 10+ */
      color: colours.$colour-textinput-text;
      overflow: visible;
    }
    :-moz-placeholder {
      /* Firefox 18- */
      color: colours.$colour-textinput-text;
      overflow: visible;
    }
  }
}