.iframe-embed {
  --ck-iframe-embed-source-height: initial;
  --ck-iframe-embed-source-width: calc(100% - var(--ck-icon-size) * 2.75);
  --ck-iframe-embed-content-min-height: 20rem;
  --ck-iframe-embed-content-min-width: initial;

  &:before {
    position: absolute;
    z-index: 1;
  }

  & .iframe-embed__source {
    height: var(--ck-iframe-embed-source-height);
    &:invalid {
      border-color: var(--ck-color-base-error);
      &:focus {
        border-color: var(--ck-color-base-error);
        box-shadow: var(--ck-focus-error-outer-shadow), 0 0;
      }
    }

    &:not(:disabled) {
      width: var(--ck-iframe-embed-source-width);
    }
  }

  & .iframe-embed__buttons-wrapper {
    position: absolute;
    display: flex;
    flex-direction: row;
  }

  & .iframe-embed__preview {
    position: relative;
    overflow: hidden;
    display: flex;
    padding-top: 56.25%;
    min-height: var(--ck-iframe-embed-content-min-height);
    min-width: var(--ck-iframe-embed-content-min-width);
  }

  & .iframe-embed__preview-content {
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    margin: auto;
    display: table;
    border-collapse: separate;

    & iframe {
      width: 100%;
      height: 100%;
      background-color: white;
    }
  }

  & .iframe-embed__preview-placeholder {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.ck-widget.iframe-embed {
  margin: 1em auto;
  position: relative;
  display: flow-root;

  & .iframe-embed__preview-content {
    border-spacing: 7px;
  }
}

.ck-content .iframe-embed {
  margin: 1em 0;
  min-width: 15em;
  font-style: normal;

  & .iframe-embed__preview-content {
    border-spacing: 0
  }
}