/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #2e8555;
  --ifm-color-primary-dark: #29784c;
  --ifm-color-primary-darker: #277148;
  --ifm-color-primary-darkest: #205d3b;
  --ifm-color-primary-light: #33925d;
  --ifm-color-primary-lighter: #359962;
  --ifm-color-primary-lightest: #3cad6e;
  --ifm-color-important-contrast-background: #e7d7ff;
  --ifm-color-important-highlight: #b94be8;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --ifm-color-important-contrast-background: #5a3795;
  --ifm-color-important-highlight: #e09cfd;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/* https://github.com/facebook/docusaurus/discussions/5749 */
details[class^='details_'].alert--info {
  --ifm-alert-border-color: var(--ifm-color-emphasis-400);
  /* --ifm-alert-background-color: transparent; */
  --ifm-code-background: #{palette.$background};
  --ifm-alert-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.8);

  margin-bottom: var(--ifm-paragraph-margin-bottom);

  &:not(.alert--warning,.alert--success,.alert--secondary,.alert--danger,.alert--important) {
    --ifm-alert-background-color: transparent;

    > summary {
      min-height: 1.3rem;
      display: inline-block;
      width: 100%;
    }
    > summary::before {
      top: 0.15rem;
    }
  }

  &.alert--success {
    --ifm-alert-background-color: var(--ifm-color-success-contrast-background);
    --ifm-alert-foreground-color: var(--ifm-color-info-contrast-foreground);
  }
  &.alert--secondary {
    --ifm-alert-background-color: var(--ifm-color-secondary-contrast-background);
    --ifm-alert-foreground-color: var(--ifm-color-secondary-contrast-foreground);
  }
  &.alert--important {
    --ifm-alert-background-color: var(--ifm-color-important-contrast-background);
    --ifm-alert-foreground-color: var(--ifm-color-secondary-contrast-foreground);
  }

  > summary {
    --docusaurus-details-decoration-color: currentColor;
    font: var(--ifm-heading-font-weight) var(--ifm-h5-font-size) / var(--ifm-heading-line-height) var(--ifm-heading-font-family);

    &::before {
      top: 0.40rem;
    }

    .admoIcon {
      display: inline-block;
      vertical-align: middle;
      margin-right: 0.4em;

      > svg { 
        display: inline-block;
        height: 1.6em;
        width: 1.6em;
        fill: var(--ifm-alert-foreground-color);
      }
    }
  }
  > div > div[class^='collapsibleContent_'] {
    margin-top: var(--ifm-alert-padding-vertical);
  }


  dl {
    --ifm-spacing-vertical: 0.5rem;
  }

}

.alert--info.theme-admonition-important {
    --ifm-alert-background-color: var(--ifm-color-important-contrast-background);
    --ifm-alert-foreground-color: var(--ifm-color-secondary-contrast-foreground);
    --ifm-alert-border-color: var(--ifm-color-important-highlight);
}

/** https://stackoverflow.com/a/79808430/1469797 */
img.image-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Capability tables (sources/clients overview), modeled on https://forges.link/reference/capability-matrix */
.capability-swatch {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  vertical-align: middle;
  flex: none;
}
.capability-swatch[data-level='yes'] {
  background: var(--ifm-color-primary);
}
.capability-swatch[data-level='config'] {
  background: repeating-linear-gradient(135deg, var(--ifm-color-primary) 0 1.5px, transparent 1.5px 3.5px);
  box-shadow: inset 0 0 0 1px var(--ifm-color-primary);
}
.capability-swatch[data-level='na'] {
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--ifm-color-emphasis-700) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    var(--ifm-color-emphasis-100);
  box-shadow: inset 0 0 0 1px var(--ifm-color-emphasis-300);
}
.capability-swatch[data-level='no'] {
  background: var(--ifm-color-emphasis-300);
}

.capability-legend {
  margin-bottom: var(--ifm-spacing-vertical);
  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    padding: 0;
    margin-bottom: 0.5rem;
  }
  li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}

/* wrapper is the scroll container so both the header and first column can be sticky */
.capability-matrix {
  max-height: calc(100vh - var(--ifm-navbar-height) - 2rem);
  overflow: auto;
  margin-bottom: var(--ifm-spacing-vertical);

  table {
    display: table;
    overflow: visible;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
  }
  th, td {
    border-width: 0 1px 1px 0;
    background: var(--ifm-background-color);
  }
  tr > :first-child {
    border-left-width: 1px;
  }
  thead th {
    border-top-width: 1px;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  tbody tr:nth-child(2n) > * {
    background: linear-gradient(var(--ifm-table-stripe-background), var(--ifm-table-stripe-background)), var(--ifm-background-color);
  }
  tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
  }
  thead tr > :first-child {
    z-index: 3;
  }
}

/* mobile: component name becomes a full-width row "header" with features below it */
@media (max-width: 996px) {
  .capability-matrix {
    max-height: none;
    overflow: visible;

    table {
      display: block;
    }
    thead {
      display: block;
      position: sticky;
      top: var(--ifm-navbar-height);
      z-index: 2;
    }
    tbody {
      display: block;
    }
    tr {
      display: grid;
      grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    }
    th, td {
      display: block;
      padding: 0.25rem;
      font-size: 0.875rem;
      border-width: 0 0 1px 0;
    }
    thead th {
      position: static;
      font-size: 0.7rem;
      hyphens: auto;
      border-top-width: 0;
    }
    thead tr > :first-child {
      display: none;
    }
    tbody tr > :first-child {
      position: static;
      grid-column: 1 / -1;
      border-bottom-width: 0;
      font-weight: var(--ifm-font-weight-semibold);
    }
    tr > :first-child {
      border-left-width: 0;
    }
  }
}