@use '_borderPlaceholders.scss';
%adaptiveText{
  .adaptive{
    display:grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "content";
    position:relative;
    >*{
      grid-area: content;
    }
    > span{
      opacity: 0;
      z-index: -10;
      @extend %base-border;
      text-transform: initial;
      border-radius:0px;
    }
  }
  .adaptive--text{
    min-height:4rem;
  }
  .adaptive--text__span{
    white-space: pre-wrap;
    padding:2px;
  }
  .adaptive--text__textarea{
    width:100%;
    height:100%;
    resize: none;
  }
  .adaptive--text__textarea,
  .adaptive--input__input{
    position:absolute;
  }
  .adaptive--input__input{
    width:100%;
  }
  .adaptive--input__span{
    padding:2px;
    min-height:1.5rem;
  }
}