/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-rekai-recommendations {
  .logoHeader {
    display: flex;
    gap: 2rem;
    padding: 1rem;
    align-items: center;

    img {
      max-width: 100%;
      height: 18px;
    }

    h4 {
      padding: 0;
      margin: 0;
      font-weight: bold;
    }
  }

  .rekai-recommendations-preview {
    &.pills {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .item {
        border-radius: 1rem;
        background: #0a00a2;
        padding: 1rem;
        width: 156px;
        &:nth-child(5n + 1) {
          width: 178px;
        }
        &:nth-child(5n + 2) {
          width: 142px;
        }
        &:nth-child(5n + 3) {
          width: 161px;
        }
        &:nth-child(5n + 4) {
          width: 89px;
        }
      }
    }
    &.list,
    &.advanced {
      display: grid;
      grid-template-columns: 1fr;
      &.cols2 {
        grid-template-columns: 1fr 1fr;
      }
      &.cols3 {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }
    &.list {
      .item {
        border-radius: 1rem;
        background: #0a00a2;
        padding: 1rem;
      }
    }
    &.advanced {
      .item {
        margin-bottom: 2rem;
        > div {
          border-radius: 1rem;
          background: #0a00a2;
        }
      }
      .image {
        height: 128px;
        margin-bottom: 1rem;
      }
      .title {
        margin-bottom: 1rem;
        width: 80%;
        padding: 1rem;
      }
      .row {
        margin-bottom: 0.5rem;
        padding: 0.75rem;
      }
      .row2 {
        width: 60%;
      }
    }
  }

  .rekai-qna-preview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;

    .rekai-block-preview-item {
      display: flex;
      flex-direction: row;
      gap: 1rem;
      align-items: center;
      justify-content: space-between;
      width: 100%;

      .rekai-block-preview-blob {
        flex-grow: 1;
        height: 1.5rem;
        background: #0a00a2;
        border-radius: 1rem;
      }

      svg {
        flex-shrink: 1;
      }
    }
  }

  .item {
    margin: 0.5rem;
  }
}

// Remove padding in heading level control popover since the toolbar buttons already have padding.
.block-library-heading-level-dropdown .components-popover__content {
  // TODO: Find a less hardcoded way of doing this. `max-content` works on
  // Chromium, but it results in a scrollbar on Safari, and isn't supported
  // at all in IE11.
  min-width: 230px;

  > div {
    padding: 0;
  }
}

// The dropdown already has a border, so we can remove the one on the heading
// level toolbar.
.block-library-heading-level-toolbar {
  border: none;
  .components-toolbar-group {
    flex-wrap: nowrap;
  }
}