@use "app";
@use "global/variables/colours";

.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]) {
  &:hover:after {
    content: '';
    outline: 2px solid colours.$wpblue;
    position: absolute;
    inset: 0;
  }

  &:focus:after {
    outline-style: dashed;
  }
}

.editor-styles-wrapper {
  padding: 0;
  background: transparent;
}

.editor-visual-editor {
  &__post-title-wrapper {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 1rem;
    margin: 0 !important;
    background: white;
    box-shadow: 0 0.5rem 1rem rgba(black, 0.15);
  }
}

.editor-styles-wrapper {
  background: colours.$grey-lightest;

  .block-list-appender {
    width: 350px;
    max-width: 90%;
    margin: 1em auto;
  }
}

.wp-block-post-title {
  position: relative;
  padding: 0.5rem;
  border: 1px solid rgba(black, 0.3);
  margin: 0;

  &::before {
    content: 'Page Title';
    position: absolute;
    top: -0.5rem;
    left: 0.5rem;
    color: rgba(black, 0.3);
    font-size: 0.8rem;
    display: block;
    padding: 0 0.5rem;
    margin: 0;
    background: white;
    line-height: 1;
    font-weight: 400;
  }
}

.is-root-container > .wp-block:not(.block-list-appender) {
  max-width: none;
  margin: 0;
}