/* Styles to use with responsive images
 * `.text-formatted` ensures styles are only applied when images are in cke
 * Use breakpoints from gcds.breakpoints.yml
 *  - standard: 30em (576px)
 *  - wide: 48em (922px)
 */

:root {
  --gcdrupal-responsive-image-margin-default: 1em;
  --gcdrupal-responsive-image-margin-standard: 1.2em;
  --gcdrupal-responsive-image-margin-wide: 1.6em;
}


/* Image position relative to text on default (mobile) */
.text-formatted figure,
.text-formatted .media--type-image:not(figure .media--type-image) {
  margin-top: calc(var(--gcdrupal-responsive-image-margin-default) / 2);
  margin-bottom: var(--gcdrupal-responsive-image-margin-default);
  width: fit-content;
}

/* Right aligned thumbnail and small */
.text-formatted figure.align-right:has(.media--type-image.media--view-mode-gcds-small),
.text-formatted figure.align-right:has(.media--type-image.media--view-mode-gcds-thumbnail),
.text-formatted .align-right.media--type-image.media--view-mode-gcds-small:not(figure .align-right.media--type-image.media--view-mode-gcds-small),
.text-formatted .align-right.media--type-image.media--view-mode-gcds-thumbnail:not(figure .align-right.media--type-image.media--view-mode-gcds-thumbnail) {
  margin-left: var(--gcdrupal-responsive-image-margin-default);
}

/* Left aligned thumbnail and small */
.text-formatted figure.align-left:has(.media--type-image.media--view-mode-gcds-small),
.text-formatted figure.align-left:has(.media--type-image.media--view-mode-gcds-thumbnail),
.text-formatted .align-left.media--type-image.media--view-mode-gcds-small:not(figure .align-left.media--type-image.media--view-mode-gcds-small),
.text-formatted .align-left.media--type-image.media--view-mode-gcds-thumbnail:not(figure .align-left.media--type-image.media--view-mode-gcds-thumbnail) {
  margin-right: var(--gcdrupal-responsive-image-margin-default);
}

@media screen and (min-width: 30em) {
  /* Image position relative to text on standard (tablet) */
  .text-formatted figure,
  .text-formatted .media--type-image:not(figure .media--type-image) {
    margin-bottom: var(--gcdrupal-responsive-image-margin-standard);
  }

  /* Left aligned thumbnail, small, medium, portrait, and square */
  .text-formatted figure.align-left:has(.media--type-image.media--view-mode-gcds-medium),
  .text-formatted figure.align-left:has(.media--type-image.media--view-mode-gcds-portrait),
  .text-formatted figure.align-left:has(.media--type-image.media--view-mode-gcds-small),
  .text-formatted figure.align-left:has(.media--type-image.media--view-mode-gcds-square),
  .text-formatted figure.align-left:has(.media--type-image.media--view-mode-gcds-thumbnail),
  .text-formatted .align-left.media--type-image.media--view-mode-gcds-medium:not(figure .align-left.media--type-image.media--view-mode-gcds-medium),
  .text-formatted .align-left.media--type-image.media--view-mode-gcds-portrait:not(figure .align-left.media--type-image.media--view-mode-gcds-portrait),
  .text-formatted .align-left.media--type-image.media--view-mode-gcds-small:not(figure .align-left.media--type-image.media--view-mode-gcds-small),
  .text-formatted .align-left.media--type-image.media--view-mode-gcds-square:not(figure .align-left.media--type-image.media--view-mode-gcds-square),
  .text-formatted .align-left.media--type-image.media--view-mode-gcds-thumbnail:not(figure .align-left.media--type-image.media--view-mode-gcds-thumbnail) {
    margin-right: var(--gcdrupal-responsive-image-margin-standard);
  }

  /* Right aligned thumbnail, small, medium, portrait, and square */
  .text-formatted figure.align-right:has(.media--type-image.media--view-mode-gcds-medium),
  .text-formatted figure.align-right:has(.media--type-image.media--view-mode-gcds-portrait),
  .text-formatted figure.align-right:has(.media--type-image.media--view-mode-gcds-small),
  .text-formatted figure.align-right:has(.media--type-image.media--view-mode-gcds-square),
  .text-formatted figure.align-right:has(.media--type-image.media--view-mode-gcds-thumbnail),
  .text-formatted .align-right.media--type-image.media--view-mode-gcds-medium:not(figure .align-right.media--type-image.media--view-mode-gcds-medium),
  .text-formatted .align-right.media--type-image.media--view-mode-gcds-portrait:not(figure .align-right.media--type-image.media--view-mode-gcds-portrait),
  .text-formatted .align-right.media--type-image.media--view-mode-gcds-small:not(figure .align-right.media--type-image.media--view-mode-gcds-small),
  .text-formatted .align-right.media--type-image.media--view-mode-gcds-square:not(figure .align-right.media--type-image.media--view-mode-gcds-square),
  .text-formatted .align-right.media--type-image.media--view-mode-gcds-thumbnail:not(figure .align-right.media--type-image.media--view-mode-gcds-thumbnail) {
    margin-left: var(--gcdrupal-responsive-image-margin-standard);
  }

  /* Image width adjustment for square and portrait */
  .text-formatted figure[class*="align"]:has(.media--type-image.media--view-mode-gcds-portrait),
  .text-formatted figure[class*="align"]:has(.media--type-image.media--view-mode-gcds-square),
  .text-formatted [class*="align"].media--type-image.media--view-mode-gcds-portrait:not(figure .align-left.media--type-image.media--view-mode-gcds-portrait),
  .text-formatted [class*="align"].media--type-image.media--view-mode-gcds-square:not(figure .align-left.media--type-image.media--view-mode-gcds-square) {
    max-width: calc(50% - var(--gcdrupal-responsive-image-margin-standard));
  }
}

@media (min-width: 48em) {
  /* Image position relative to text on wide (desktop) */
  .text-formatted figure,
  .text-formatted .media--type-image:not(figure .media--type-image) {
    margin-bottom: var(--gcdrupal-responsive-image-margin-wide);
  }

  /* Left aligned thumbnail, small, medium, portrait, and square */
  .text-formatted figure.align-left:has(.media--type-image.media--view-mode-gcds-medium),
  .text-formatted figure.align-left:has(.media--type-image.media--view-mode-gcds-portrait),
  .text-formatted figure.align-left:has(.media--type-image.media--view-mode-gcds-small),
  .text-formatted figure.align-left:has(.media--type-image.media--view-mode-gcds-square),
  .text-formatted figure.align-left:has(.media--type-image.media--view-mode-gcds-thumbnail),
  .text-formatted .align-left.media--type-image.media--view-mode-gcds-medium:not(figure .align-left.media--type-image.media--view-mode-gcds-medium),
  .text-formatted .align-left.media--type-image.media--view-mode-gcds-portrait:not(figure .align-left.media--type-image.media--view-mode-gcds-portrait),
  .text-formatted .align-left.media--type-image.media--view-mode-gcds-small:not(figure .align-left.media--type-image.media--view-mode-gcds-small),
  .text-formatted .align-left.media--type-image.media--view-mode-gcds-square:not(figure .align-left.media--type-image.media--view-mode-gcds-square),
  .text-formatted .align-left.media--type-image.media--view-mode-gcds-thumbnail:not(figure .align-left.media--type-image.media--view-mode-gcds-thumbnail) {
    margin-right: var(--gcdrupal-responsive-image-margin-wide);
  }

  /* Right aligned thumbnail, small, medium, portrait, and square */
  .text-formatted figure.align-right:has(.media--type-image.media--view-mode-gcds-medium),
  .text-formatted figure.align-right:has(.media--type-image.media--view-mode-gcds-portrait),
  .text-formatted figure.align-right:has(.media--type-image.media--view-mode-gcds-small),
  .text-formatted figure.align-right:has(.media--type-image.media--view-mode-gcds-square),
  .text-formatted figure.align-right:has(.media--type-image.media--view-mode-gcds-thumbnail),
  .text-formatted .align-right.media--type-image.media--view-mode-gcds-medium:not(figure .align-right.media--type-image.media--view-mode-gcds-medium),
  .text-formatted .align-right.media--type-image.media--view-mode-gcds-portrait:not(figure .align-right.media--type-image.media--view-mode-gcds-portrait),
  .text-formatted .align-right.media--type-image.media--view-mode-gcds-small:not(figure .align-right.media--type-image.media--view-mode-gcds-small),
  .text-formatted .align-right.media--type-image.media--view-mode-gcds-square:not(figure .align-right.media--type-image.media--view-mode-gcds-square),
  .text-formatted .align-right.media--type-image.media--view-mode-gcds-thumbnail:not(figure .align-right.media--type-image.media--view-mode-gcds-thumbnail) {
    margin-left: var(--gcdrupal-responsive-image-margin-wide);
  }

  /* Constrain the size of GCDS responsive images - wide */
  .text-formatted .media--view-mode-gcds-square {
    max-height: 700px;
  }
}