@import 'common';

#text-editor-wrapper {
  background: $panel-textarea-background-color;
  overflow: hidden;
  
  h1.title {
    &:before {
      content: 'Current Item: ';
    }
  }
  button.close {
    position: absolute;
    top: 0.4em;
    right: 0.6em;
  }
  textarea {
    width: 98.83%;
    height: 80%;
    resize: none;
    background-color: $panel-textarea-background-color;
    color: $panel-text-color-brightest;
    border-color: $panel-text-color-darkest;
    border-radius: $panel-interaction-border-radius;
    &::-webkit-scrollbar-thumb {
      // multiplying by 1.5 makes a round border that fits to the area
      border-radius: $panel-interaction-border-radius * 1.5;
      border-color: $panel-background-color;
    }
  }
  div#notify-area {
    background: $panel-background-color-brighter;
    color: $panel-text-color-brighter;
    position: absolute;
    bottom: -12%;
    width: 97%;
    padding: 0.25em 0;
    opacity: 0;
    transition: opacity 0.5s, bottom 0.5s;
    &.visible {
      opacity: 1;
      bottom: 12%;
    }
  }
  
  @media (max-height: 599px) and (orientation: landscape) {
    & > div:last-of-type {
      position: absolute;
      bottom: 8px;
    }
  }
}
