/* ---- Gallery block ---- */

.wp-block-gallery {
  clear: both;
  margin-top: 2em;
  margin-bottom: 2em;
}

.wp-block-gallery .wp-block-image > a,
.wp-block-gallery .wp-block-image > div > a /* for the block editor */ {
  border-bottom: transparent !important;
  padding-bottom: 0 !important;
}

.wp-block-gallery .wp-block-image:not(.is-style-rounded) figcaption {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  background-image: none;
  margin: 1px;
  text-shadow: none;
  width: calc(100% - 2px);
}

.wp-block-gallery.has-nested-images.alignfull figure.wp-block-image figcaption {
  margin-left: var(--wp--style--root--padding-left);
  margin-right: var(--wp--style--root--padding-right);
  width: calc(100% - (var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right)));
}

/* Remove blur on figcaption */
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
  backdrop-filter: none;
}

@media (min-width: 1366px) {
  .wp-block-gallery.alignleft {
    margin-left: 20% !important;
  }

  .wp-block-gallery.alignright {
    margin-right: 20% !important;
  }
}

.entry-content:has(.wp-block-gallery.alignfull, .wp-block-gallery.alignwide) {
  clear: both;
}

.wp-block-gallery {
  .wp-block-image a img {
    .mxs-light-theme-bg &,
    .mxs-dark-theme-bg .mxs-light-bg & {
      border: 1px solid var(--black-25pcnt);
    }

    .mxs-dark-theme-bg &,
    .mxs-light-theme-bg .mxs-dark-bg & {
      border: 1px solid var(--white-25pcnt);
    }
  }

  .wp-block-image a img:hover,
  .wp-block-image a:focus img {
    .mxs-light-theme-bg &,
    .mxs-dark-theme-bg .mxs-light-bg & {
      border-color: var(--black-75pcnt);
    }

    .mxs-dark-theme-bg &,
    .mxs-light-theme-bg .mxs-dark-bg & {
      border-color: var(--white-75pcnt);
    }
  }
}

.wp-block-gallery.has-nested-images {
  figure.wp-block-image:not(.is-style-rounded) figcaption {
    .mxs-dark-theme-bg &,
    .mxs-light-theme-bg .mxs-dark-bg & {
      background-color: var(--white-50pcnt);
      color: #000000;
    }

    .mxs-light-theme-bg &,
    .mxs-dark-theme-bg .mxs-light-bg & {
      background-color: var(--black-50pcnt);
      color: #ffffff;
    }
  }
}
