:root {

  /* Default color shades */
  --md-default-fg-color:               rgba(23,23,23, 1);
  --md-default-fg-color--light:        rgba(23,23,23, .7);
  --md-default-fg-color--lighter:      rgba(23,23,23, .3);
  --md-default-fg-color--lightest:     rgba(23,23,23, .12);
  --md-default-bg-color:               rgba(255,255,255, 1);
  --md-default-bg-color--light:        rgba(255,255,255, .7);
  --md-default-bg-color--lighter:      rgba(255,255,255, .3);
  --md-default-bg-color--lightest:     rgba(255,255,255, .12);

  /* Primary color shades */
  --md-primary-fg-color:               #333;
  --md-text-color:                     #333;
  --md-primary-fg-color--light:        #777;
  --md-primary-fg-color--dark:         hsla(#{hex2hsl($clr-indigo-700)}, 1);
  --md-primary-bg-color:               var(--md-default-bg-color);
  --md-primary-bg-color--light:        var(--md-default-bg-color--light);

  /* Accent color shades */
  --md-accent-fg-color:                hsla(#{hex2hsl($clr-indigo-a200)}, 1);
  --md-accent-fg-color--transparent:   hsla(#{hex2hsl($clr-indigo-a200)}, 0.1);
  --md-accent-bg-color:                var(--md-default-bg-color);
  --md-accent-bg-color--light:         var(--md-default-bg-color--light);

  /* Code block color shades */
  --md-code-bg-color:                  hsla(0, 0%, 92.5%, 0.5);
  --md-code-fg-color:                  hsla(200, 18%, 26%, 1);

  /* Inflectra colors*/
  --yolk:                              #fdcb26;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Default color shades */
    --md-default-fg-color:               rgba(255,255,255, 1);
    --md-default-fg-color--light:        rgba(255,255,255, .7);
    --md-default-fg-color--lighter:      rgba(255,255,255, .3);
    --md-default-fg-color--lightest:     rgba(255,255,255, .12);
    --md-default-bg-color:               rgba(23,23,23, 1);
    --md-default-bg-color--light:        rgba(23,23,23, .7);
    --md-default-bg-color--lighter:      rgba(23,23,23, .3);
    --md-default-bg-color--lightest:     rgba(23,23,23, .12);

    /* Primary color shades */
    --md-primary-fg-color:               #e3e3e3;
    --md-text-color:                     #e3e3e3;
    --md-primary-fg-color--light:        hsla(#{hex2hsl($clr-indigo-300)}, 1);
    --md-primary-fg-color--dark:         hsla(#{hex2hsl($clr-indigo-700)}, 1);
    --md-primary-bg-color:               var(--md-default-bg-color);
    --md-primary-bg-color--light:        var(--md-default-bg-color--light);

    /* Accent color shades */
    --md-accent-fg-color:                hsla(#{hex2hsl($clr-indigo-a200)}, 1);
    --md-accent-fg-color--transparent:   hsla(#{hex2hsl($clr-indigo-a200)}, 0.1);
    --md-accent-bg-color:                var(--md-default-bg-color);
    --md-accent-bg-color--light:         var(--md-default-bg-color--light);

    /* Code block color shades */
    --md-code-bg-color:                  hsla(0, 0%, 7.5%, 0.5);
    --md-code-fg-color:                  hsla(200, 18%, 75%, 1);
  }
}

.section-break {
  border-bottom: 2px solid var(--md-default-fg-color);
  padding: 2rem 0 .5rem 0;
}

.border-all {
  border: 1px solid var(--md-accent-bg-color--light);
}

.pill {
  background-color: var(--yolk);
  border-radius: 0.25rem;
  font-size: 66%;
  font-weight: bold;
  padding: 0.125rem 0.5rem;
  vertical-align: middle;
}

[class^='edition-']::after,
[class^='feature-']::after {
  content: "";
  background-color: var(--yolk);
  border-radius: 0.25rem;
  font-size: 66%;
  font-weight: bold;
  padding: 0.125rem 0.5rem;
  vertical-align: middle;
  color: var(--md-default-fg-color--inverted);
  margin-left: 0.5em;
  display: inline-block;
}

/* --- Case 2: SpiraPlan ONLY --- */
.edition-spiraplan:not(.edition-spirateam)::after {
  content: "SpiraPlan";
}

/* --- Case 2: SpiraTeam ONLY --- */
.edition-spirateam:not(.edition-spiraplan)::after {
  content: "SpiraTeam";
}

/* --- Case 3: BOTH SpiraPlan and SpiraTeam --- */
.edition-spiraplan.edition-spirateam::after {
  content: "SpiraTeam / SpiraPlan";
}

/* --- Case 4: SpiraTest ONLY --- */
.edition-spiratest:not(.edition-spirateam)::after {
  content: "SpiraTest";
}

/* --- Case 5: BOTH SpiraTest and SpiraTeam --- */
.edition-spiratest.edition-spirateam::after {
  content: "SpiraTest / SpiraTeam";
}

/* --- Inflectra.ai --- */
.feature-inflectraai::after {
  content: "Inflectra.ai";
}

/* reduce spacing from the abstract admonition and the h1 - used for saying what editions the page supports */
h1 + .admonition.abstract {
  margin-top: -1.5rem;
}