.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .wp-block[data-align=full] {
  margin: 0 auto;
}

.block-editor-block-list__block[data-type="core/spacer"]::before {
  height: 60px;
}

.wp-block {
  @apply
    font-sans;

  max-width: 1280px;
  padding: 0.5rem;
  border-radius: 8px;
  position: relative;
  border: 1px solid #d6d6d6;

  &::before {
    content: "";
    display: block;
    position: absolute;
    padding: 0;
    top: -60px;
    right: 0;
    opacity: 1;
    pointer-events: none;
    zoom: 1;
    width: 100%;
    height: 60px;
    transform: 0;
    z-index: 10;
    background-size: contain;
    background-repeat: no-repeat;
  }

  &.is-mobile-hide {
    &::before {
      background: url("../images/editor/smartphone-hidden.svg") no-repeat 100% 0%;
    }

    &.is-tablet-hide {
      &::before {
        background:
          url("../images/editor/smartphone-hidden.svg") no-repeat calc(100% - 60px) 0%,
          url("../images/editor/tablet-hidden.svg") no-repeat 100% 0%;
      }

      &.is-desktop-hide {
        &::before {
          background:
            url("../images/editor/smartphone-hidden.svg") no-repeat calc(100% - 120px) 0%,
            url("../images/editor/tablet-hidden.svg") no-repeat calc(100% - 60px) 0%,
            url("../images/editor/laptop-hidden.svg") no-repeat 100% 0%;
        }

        &.is-wide-hide {
          &::before {
            background:
              url("../images/editor/smartphone-hidden.svg") no-repeat calc(100% - 180px) 0%,
              url("../images/editor/tablet-hidden.svg") no-repeat calc(100% - 120px) 0%,
              url("../images/editor/laptop-hidden.svg") no-repeat calc(100% - 60px) 0%,
              url("../images/editor/desktop-hidden.svg") no-repeat 100% 0%;
          }
        }
      }
    }

    &.is-desktop-hide {
      &::before {
        background:
          url("../images/editor/smartphone-hidden.svg") no-repeat calc(100% - 60px) 0%,
          url("../images/editor/laptop-hidden.svg") no-repeat 100% 0%;
      }

      &.is-wide-hide {
        &::before {
          background:
            url("../images/editor/smartphone-hidden.svg") no-repeat calc(100% - 120px) 0%,
            url("../images/editor/laptop-hidden.svg") no-repeat calc(100% - 60px) 0%,
            url("../images/editor/desktop-hidden.svg") no-repeat 100% 0%;
        }
      }
    }
  }

  &.is-tablet-hide {
    &::before {
      background: url("../images/editor/tablet-hidden.svg") no-repeat 100% 0%;
    }

    &.is-desktop-hide {
      &::before {
        background:
          url("../images/editor/tablet-hidden.svg") no-repeat calc(100% - 60px) 0%,
          url("../images/editor/laptop-hidden.svg") no-repeat 100% 0%;
      }
    }

    &.is-wide-hide {
      &::before {
        background:
          url("../images/editor/tablet-hidden.svg") no-repeat calc(100% - 60px) 0%,
          url("../images/editor/desktop-hidden.svg") no-repeat 100% 0%;
      }

      &.is-desktop-hide {
        &::before {
          background:
            url("../images/editor/tablet-hidden.svg") no-repeat calc(100% - 120px) 0%,
            url("../images/editor/laptop-hidden.svg") no-repeat calc(100% - 60px) 0%,
            url("../images/editor/desktop-hidden.svg") no-repeat 100% 0%;
        }
      }
    }
  }

  &.is-desktop-hide {
    &::before {
      background: url("../images/editor/laptop-hidden.svg") no-repeat 100% 0%;
    }

    &.is-mobile-hide {
      &::before {
        background:
          url("../images/editor/smartphone-hidden.svg") no-repeat calc(100% - 60px) 0%,
          url("../images/editor/desktop-hidden.svg") no-repeat 100% 0%;
      }
    }

    &.is-tablet-hide {
      &.is-wide-hide {
        &::before {
          background:
            url("../images/editor/tablet-hidden.svg") no-repeat calc(100% - 120px) 0%,
            url("../images/editor/laptop-hidden.svg") no-repeat calc(100% - 60px) 0%,
            url("../images/editor/desktop-hidden.svg") no-repeat 100% 0%;
        }
      }
    }
  }

  &.is-wide-hide {
    &::before {
      background: url("../images/editor/desktop-hidden.svg") no-repeat 100% 0%;
    }

    &.is-mobile-hide {
      &::before {
        background:
          url("../images/editor/smartphone-hidden.svg") no-repeat calc(100% - 60px) 0%,
          url("../images/editor/desktop-hidden.svg") no-repeat 100% 0%;
      }

      &.is-tablet-hide {
        &::before {
          background:
            url("../images/editor/smartphone-hidden.svg") no-repeat calc(100% - 120px) 0%,
            url("../images/editor/tablet-hidden.svg") no-repeat calc(100% - 60px) 0%,
            url("../images/editor/desktop-hidden.svg") no-repeat 100% 0%;
        }
      }
    }

    &.is-desktop-hide {
      &::before {
        background:
          url("../images/editor/laptop-hidden.svg") no-repeat calc(100% - 60px) 0%,
          url("../images/editor/desktop-hidden.svg") no-repeat 100% 0%;
      }
    }
  }

  &.is-selected {
    border: 1px solid #007cba;

    .wp-block {
      border: 1px solid #007cba;
    }
  }

  &[data-type="core/spacer"] {
    border: 0;
    opacity: 0.6;
    background-color: #f5f5f5;
  }
}
