.bb\:has-background {
  position: relative;
  overflow: hidden;

  .bb\:block-background {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0 !important;
    overflow: hidden;
    max-width: none !important;
    margin-top: 0;

    &[style*="background-attachment: fixed"] {
      will-change: unset !important;
    }

    ~ * {
      position: relative;
      z-index: 1;
    }

    &--video {
      video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  // Reset bock gap for the first block if there is a background
  // .editor-styles-wrapper & > .bb\:block-background + *,
  > .bb\:block-background + * {
    margin-top: 0;
  }

  // .editor-styles-wrapper & {
  //   min-height: 48px;;
  // }
}

.bb\:has-background--video {
  z-index: 0;

  ~ * {
    position: relative;
    z-index: 1;
  }
}

.cbb-play-pause {
  --pp-color: var(--cbb--pp-color, #fff);
  --pp-size: var(--cbb--pp-size, 36px);
  --pp-icon-size: var(--cbb--pp-icon-size, calc(var(--pp-size) / 2));

  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--pp-size) !important;
  height: var(--pp-size);
  cursor: pointer;
  border-radius: 99px;

  &::after {
    content: '';
    position: absolute;
    display: block;
    width: var(--pp-icon-size);
    height: var(--pp-icon-size);
    background-size: var(--pp-icon-size);
    background-color: var(--pp-color);
  }

  &.is-playing::after {
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect width="4.5" height="14" x="4" y="3" rx="1.5"/><rect width="4.5" height="14" x="12" y="3" rx="1.5"/></svg>');
  }

  &.is-paused::after {
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5 15.25V4.77a1.44 1.44 0 0 1 1.44-1.62 1.86 1.86 0 0 1 1.11.31l8.53 5c.76.44 1.17.8 1.17 1.51s-.41 1.07-1.17 1.51l-8.53 5a1.86 1.86 0 0 1-1.11.31A1.42 1.42 0 0 1 5 15.25Z"/></svg>');
  }
}

.cbb-video-play-pause {
  --cbb--pp-icon-size: 20px;
  position: absolute !important;
  right: var(--pp-edge, 2rem);
  bottom: var(--pp-edge, 2rem);
  z-index: 2 !important;
  margin: 0;
  padding: 0;
  background-color: rgba(#000, .6);
  border: 0 !important;
  border-radius: 99px !important;
  transition: .25s;

  &:focus {
    box-shadow: 0px 0px 0px 3px #fff, 0px 0px 0px 5px var(--wp--preset--color--accent,#0071e3);
    outline: none;
  }
}

.bb\:link-to-post {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  margin: 0;
}