:root {
  --ui-icon-filter: invert(0%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ui-icon-filter: invert(100%);
  }
}

body {
  &[style*='color-scheme: light']:not([style*='color-scheme: light dark']),
  &[style*='color-scheme: only light'] {
    --ui-icon-filter: invert(0%) !important;
  }

  &[style*='color-scheme: dark']:not([style*='color-scheme: light dark']),
  &[style*='color-scheme: only dark'] {
    --ui-icon-filter: invert(100%) !important;
  }
}

figure[data-type*='example'] {
  margin-block: var(--rh-space-3xl);

  figcaption {
    margin-block-start: var(--rh-space-xl);

    :is(p, ul, ol) {
      margin-block-start: 0;
    }
  }

  &:is([data-type*='landscape']) {
    img {
      display: block;
      margin-block-end: var(--rh-space-xl);
    }
  }

  &:not([data-type*='landscape']) {
    /* has 2 or more images */
    &:has(> :nth-child(2):not(figcaption)) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--rh-space-2xl);
    }

    /* has only 3 images or more than 5 */
    &:has(> :nth-child(3):not(figcaption)):not(:has(> :nth-child(4):not(figcaption))),
    &:has(> :nth-child(5):not(figcaption)) {
      grid-template-columns: repeat(3, 1fr);
    }

    figcaption {
      grid-column: 1 / -1;
    }
  }
}

/* Adds the "Do" & "Don't" tags with icons to the do/dont <figure> types */
figure[data-type='do'],
figure[data-type='dont'] {
  margin-block: var(--rh-space-3xl);

  /* stylelint-disable-next-line no-descending-specificity */
  figcaption {
    position: relative;
    font-size: var(--rh-font-size-body-text-lg, 1.125rem);

    &:before {
      display: block;
      content: 'Do';
      margin-inline-start: calc(var(--rh-size-icon-01) + var(--rh-space-md));
      margin-block-end: var(--rh-space-lg);
      color: var(--rh-color-status-success);
      font-family: var(--rh-font-family-heading);
      font-size: var(--rh-font-size-heading-xs);
      font-weight: var(--rh-font-weight-heading-medium);
    }

    &:after {
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 0;
      transform: translateY(50%);
      display: block;
      content: '';
      width: var(--rh-size-icon-01);
      height: var(--rh-size-icon-01);
      mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22var(--rh-color-gray-95)%22%3E%3Cpath%20d%3D%22M16%201C7.729%201%201%207.729%201%2016s6.729%2015%2015%2015%2015-6.729%2015-15S24.271%201%2016%201Zm7.795%2011.795-8.646%208.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126%201.126%200%200%201%201.591-1.591l4.205%204.205%208.205-8.205a1.126%201.126%200%200%201%201.591%201.591Z%22%2F%3E%3C%2Fsvg%3E');
      background-color: var(--rh-color-status-success);
    }
  }
}

figure:is([data-type='dont']) {
  figcaption {
    &:before {
      content: "Don't";
      color: var(--rh-color-status-danger);
    }

    &:after {
      mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22var(--rh-color-gray-95)%22%3E%3Cpath%20d%3D%22M16%201C7.729%201%201%207.729%201%2016s6.729%2015%2015%2015%2015-6.729%2015-15S24.271%201%2016%201Zm6.796%2020.205A1.127%201.127%200%200%201%2022%2023.126c-.288%200-.576-.11-.796-.33L16%2017.592l-5.204%205.204a1.122%201.122%200%200%201-1.592%200%201.127%201.127%200%200%201%200-1.591L14.409%2016l-5.205-5.205a1.127%201.127%200%200%201%200-1.591%201.127%201.127%200%200%201%201.592%200L16%2014.408l5.204-5.204a1.127%201.127%200%200%201%201.592%200%201.127%201.127%200%200%201%200%201.591L17.591%2016l5.205%205.205Z%22%2F%3E%3C%2Fsvg%3E');
      background-color: var(--rh-color-status-danger);
    }
  }
}

/* Layout for <figure> elements */
ul:is([data-type='dos-donts'], [data-type='examples']) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rh-space-2xl);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;

  /* 2 or 4 children → 2 equal columns; 3 or 5+ use the 3-column default */
  &:has(> li:first-child:nth-last-child(2)),
  &:has(> li:first-child:nth-last-child(4)) {
    grid-template-columns: repeat(2, 1fr);
  }

  li {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  figure {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    margin: 0 0 var(--rh-space-2xl);

    /* stylelint-disable-next-line no-descending-specificity */
    & img {
      width: 100%;
      height: auto;
    }

    /* stylelint-disable-next-line no-descending-specificity */
    figcaption {
      margin-block-start: var(--rh-space-xl);

      ul p:last-child {
        margin-block-end: 0;
      }
    }
  }

  /* Landscape figures span all columns regardless of the active column count */
  /* stylelint-disable-next-line no-descending-specificity */
  li:has(> figure[data-type*='landscape']) {
    grid-column: 1 / -1;
  }

  /* stylelint-disable-next-line no-descending-specificity */
  figure:is([data-type*='landscape']) {
    width: 100%;
    max-width: 100%;

    & img {
      width: 100%;
    }
  }
}

/* Iconography block */
/* stylelint-disable-next-line no-descending-specificity */
ul:has(> li > img[src*='rh-ui-icon-']) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rh-space-2xl);
  margin-block: var(--rh-space-2xl);
  margin-inline: 0;
  padding-inline: 0;

  /* stylelint-disable-next-line no-descending-specificity */
  li {
    list-style: none;
    margin: 0;
    padding: 0;

    /* stylelint-disable-next-line no-descending-specificity */
    img {
      display: block;
    }
  }
}

img[src*='rh-ui-icon-'] {
  filter: var(--ui-icon-filter);
  transition: filter 0s ease;
  margin-block-end: var(--rh-space-lg);
  max-width: 48px;
}

rh-alert {
  margin-block: var(--rh-space-3xl);
}

/**
 *
 * Chatbot avatar images block:
 * Force AI chatbot avatars into 4 columns, so the images display at an appropriate size
 *
 **/
.page-chatbot-avatars {
  ul[data-type='examples'] {
    &:has(> li) {
      &:has(figure) {
        &:has(img[src*='rh-icon-ai-chatbot']) {
          grid-template-columns: repeat(4, 1fr) !important;
        }
      }
    }

    figure {
      &:has(img[src*='rh-icon-ai-chatbot']) {
        align-items: center;
      }

      img {
        width: auto;
      }
    }
  }
}