//
// Editor area
//

@edit-area-iframe-background-color: @color-white;
@edit-area-border: 0;
@edit-area-border-color: @keyboard-focus-outline-color;
@edit-area-border-width: 2px;

.tox {
  .tox-edit-area {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative; // Required for the iframe to resize in IE and Edge
    &::before {
      border: @edit-area-border-width solid @edit-area-border-color;
      border-radius: 4px;
      content: '';
      inset: 0;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      transition: opacity .15s;
      z-index: 1;

      @media (forced-colors: active) {
        border: @edit-area-border-width solid highlight;
      }
    }
  }

  .tox-edit-area__iframe {
    background-color: @edit-area-iframe-background-color;
    border: @edit-area-border;
    box-sizing: border-box;
    flex: 1;
    height: 100%;
    position: absolute; // Required for the iframe to resize in IE and Edge
    width: 100%;
  }
}

.tox.tox-edit-focus .tox-edit-area::before {
  opacity: 1;
}