@import '../../../public/styles/variables';

body.wp-admin .dip-block-container .block-editor-block-list__layout,
body:not(.wp-admin) .dip-block-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

// FE
body:not(.wp-admin) .dip-block-container:not(.alignfull) {
  margin: -($cards-gutter / 2) auto;
  margin-bottom: 30px;

  .dip-article-block {
    // height: $card-height + $cards-gutter;
    padding: $cards-gutter / 2;

    &.is-style-vertical-image,
    &.is-style-image-highlight {
      .article-block-content {
        bottom: #{$cards-gutter / 2};
        max-height: calc(100% - 30px);
        overflow: hidden;
        width: calc(100% - #{$cards-gutter});
      }
    }
  }

  & > * {
    flex: 0 0 100%;
  }
}

// Editor
// Without this, rows that do not have the 4 columns filled will have the content centered
body.wp-admin .dip-block-container .block-editor-block-list__layout {
  [data-article-style] {
    margin-left: 0;
    margin-right: 0;
  }

  & > * {
    flex: 0 0 100%;
  }
}

// Tablet
@media (min-width: #{$tablet-breakpoint}) {
  // Editor
  body.wp-admin .dip-block-container.#{$block-class} .block-editor-block-list__layout {
    [data-article-style='is-style-normal'],
    [data-article-style='is-style-vertical-image'] {
      flex-basis: $one-column-width;
    }

    [data-article-style='is-style-image-highlight'],
    [data-article-style='is-style-text-highlight'] {
      flex-basis: $two-column-width;
    }
  }

  // FE
  body:not(.wp-admin) .dip-block-container.#{$block-class} {
    .is-style-normal,
    .is-style-vertical-image {
      flex-basis: $one-column-width;
    }

    .is-style-image-highlight,
    .is-style-text-highlight {
      flex-basis: $two-column-width;
    }
  }

  .dip-block-container .dip-article-block.is-style-text-highlight {
    flex-direction: row;

    .article-block-media {
      flex-basis: calc(66.7% - #{((66.7 / 100) * ($cards-gutter / 2))});
      margin: 0;
    }

    .article-block-content {
      flex-basis: calc(33.3% - #{((33.3 / 100) * ($cards-gutter / 2))} - #{$cards-gutter / 2});
      margin-left: $cards-gutter;
      padding: #{$cards-gutter / 2};
      padding-left: 0;
    }
  }
}

// Desktop
@media (min-width: #{$desktop-breakpoint}) {
  // Editor
  body.wp-admin .dip-block-container.#{$block-class} .block-editor-block-list__layout {
    [data-article-style='is-style-normal'],
    [data-article-style='is-style-vertical-image'] {
      flex-basis: $one-column-width;
    }

    [data-article-style='is-style-image-highlight'] {
      flex-basis: $two-column-width;
    }

    [data-article-style='is-style-text-highlight'] {
      flex-basis: $three-column-width;
    }
  }

  body.wp-admin .dip-block-container.#{$block-class} .multimedia-block-wrapper .block-editor-block-list__layout {
    [data-article-style='is-style-image-highlight'] {
      flex-basis: $one-column-width;
    }
  }

  // FE
  body:not(.wp-admin) .dip-block-container.#{$block-class} {
    .is-style-normal,
    .is-style-vertical-image {
      flex-basis: $one-column-width;
    }

    .is-style-image-highlight {
      flex-basis: $two-column-width;
    }

    .is-style-text-highlight {
      flex-basis: $three-column-width;
    }

    .multimedia-block-wrapper {
      .is-style-image-highlight {
        flex-basis: $one-column-width;
      }
    }
  }
}