/* Available color variables can be found here: https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/stylesheets/main/_colors.scss */

/* Colors: Use colors from Oslo Design System: https://designsystem.oslo.kommune.no/#/general-colors */
[data-md-color-scheme="byks-nice"] {
  --md-primary-fg-color:        #F9C66B;
  /* --md-primary-fg-color--light: #2c2c2c; */
  /* --md-primary-fg-color--dark:  #90030C; */
  --md-accent-fg-color:        #F9C66B;
  --md-accent-bg-color:        #ff0000;
  
  /* Title and header icons */
  --md-primary-bg-color:        #2a2859; 
  
  /* Text color */
  --md-typeset-color:           #2c2c2c; 
}

/* Inspired from https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/stylesheets/palette/_scheme.scss */
[data-md-color-scheme="byks-evil"] {

    /* --md-hue: 210;  */

    color-scheme: dark;

    --md-primary-fg-color:        #F9C66B;
    --md-primary-bg-color:        #2a2859; 

    /* // Default color shades */
    --md-default-fg-color:             hsla(var(--md-hue), 15%, 90%, 0.82);
    --md-default-fg-color--light:      hsla(var(--md-hue), 15%, 90%, 0.56);
    --md-default-fg-color--lighter:    hsla(var(--md-hue), 15%, 90%, 0.32);
    --md-default-fg-color--lightest:   hsla(var(--md-hue), 15%, 90%, 0.12);
    --md-default-bg-color:             hsla(var(--md-hue), 15%, 14%, 1);
    --md-default-bg-color--light:      hsla(var(--md-hue), 15%, 14%, 0.54);
    --md-default-bg-color--lighter:    hsla(var(--md-hue), 15%, 14%, 0.26);
    --md-default-bg-color--lightest:   hsla(var(--md-hue), 15%, 14%, 0.07);

    /* // Code color shades */
    --md-code-fg-color:                hsla(var(--md-hue), 18%, 86%, 0.82);
    --md-code-bg-color:                hsla(var(--md-hue), 15%, 18%, 1);
    --md-code-bg-color--light:         hsla(var(--md-hue), 15%, 18%, 0.9);
    --md-code-bg-color--lighter:       hsla(var(--md-hue), 15%, 18%, 0.54);

    /* // Code highlighting color shades */
    --md-code-hl-color:                hsla(#{hex2hsl($clr-blue-a400)}, 1);
    --md-code-hl-color--light:         hsla(#{hex2hsl($clr-blue-a400)}, 0.1);

    /* // Code highlighting syntax color shades */
    --md-code-hl-number-color:         hsla(6, 74%, 63%, 1);
    --md-code-hl-special-color:        hsla(340, 83%, 66%, 1);
    --md-code-hl-function-color:       hsla(291, 57%, 65%, 1);
    --md-code-hl-constant-color:       hsla(250, 62%, 70%, 1);
    --md-code-hl-keyword-color:        hsla(219, 66%, 64%, 1);
    --md-code-hl-string-color:         hsla(150, 58%, 44%, 1);
    --md-code-hl-name-color:           var(--md-code-fg-color);
    --md-code-hl-operator-color:       var(--md-default-fg-color--light);
    --md-code-hl-punctuation-color:    var(--md-default-fg-color--light);
    --md-code-hl-comment-color:        var(--md-default-fg-color--light);
    --md-code-hl-generic-color:        var(--md-default-fg-color--light);
    --md-code-hl-variable-color:       var(--md-default-fg-color--light);

    /* // Typeset color shades */
    --md-typeset-color:                var(--md-default-fg-color);

    /* // Typeset `a` color shades */
    --md-typeset-a-color:              var(--md-primary-fg-color);

    /* // Typeset `kbd` color shades */
    --md-typeset-kbd-color:            hsla(var(--md-hue), 15%, 90%, 0.12);
    --md-typeset-kbd-accent-color:     hsla(var(--md-hue), 15%, 90%, 0.2);
    --md-typeset-kbd-border-color:     hsla(var(--md-hue), 15%, 14%, 1);

    /* // Typeset `mark` color shades */
    --md-typeset-mark-color:           hsla(#{hex2hsl($clr-blue-a200)}, 0.3);

    /* // Typeset `table` color shades */
    --md-typeset-table-color:          hsla(var(--md-hue), 15%, 95%, 0.12);
    --md-typeset-table-color--light:   hsla(var(--md-hue), 15%, 95%, 0.035);

    /* // Admonition color shades */
    --md-admonition-fg-color:          var(--md-default-fg-color);
    --md-admonition-bg-color:          var(--md-default-bg-color);

    /* // Footer color shades */
    --md-footer-bg-color:              hsla(var(--md-hue), 15%, 10%, 0.87);
    --md-footer-bg-color--dark:        hsla(var(--md-hue), 15%, 8%, 1);

    /* // Shadow depth 1 */
    --md-shadow-z1:
      0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.05),
      0 0              #{px2rem(1px)}  hsla(0, 0%, 0%, 0.1);

    /* // Shadow depth 2 */
    --md-shadow-z2:
      0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.25),
      0 0              #{px2rem(1px)}  hsla(0, 0%, 0%, 0.25);

    /* // Shadow depth 3 */
    --md-shadow-z3:
      0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.4),
      0 0              #{px2rem(1px)}  hsla(0, 0%, 0%, 0.35);

    /* // Hide images for light mode */
    img[src$="#only-light"],
    img[src$="#gh-light-mode-only"] {
      display: none;
    }
}

/* Add border around images */
/* .md-content img {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  outline-width: 5px;
  outline-style: solid;
  outline-color: rgb(226, 226, 226);
} */

/* .md-grid {
  max-width: 1800px; 
} */

:root {
  --md-incomplete-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>hammer-wrench</title><path d="M13.78 15.3L19.78 21.3L21.89 19.14L15.89 13.14L13.78 15.3M17.5 10.1C17.11 10.1 16.69 10.05 16.36 9.91L4.97 21.25L2.86 19.14L10.27 11.74L8.5 9.96L7.78 10.66L6.33 9.25V12.11L5.63 12.81L2.11 9.25L2.81 8.55H5.62L4.22 7.14L7.78 3.58C8.95 2.41 10.83 2.41 12 3.58L9.89 5.74L11.3 7.14L10.59 7.85L12.38 9.63L14.2 7.75C14.06 7.42 14 7 14 6.63C14 4.66 15.56 3.11 17.5 3.11C18.09 3.11 18.61 3.25 19.08 3.53L16.41 6.2L17.91 7.7L20.58 5.03C20.86 5.5 21 6 21 6.63C21 8.55 19.45 10.1 17.5 10.1Z" /></svg>');
  --byks-core-icon: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2.4,6 H21.6 A2.4,2.4 0 0 1 24,8.4 V15.6 A2.4,2.4 0 0 1 21.6,18 H2.4 A2.4,2.4 0 0 1 0,15.6 V8.4 A2.4,2.4 0 0 1 2.4,6 Z M6.9696 11.5764C6.8214 11.1942 6.4782 10.9212 6.018 10.9212C5.3394 10.9212 4.8714 11.4048 4.8714 12.2706C4.8714 13.1832 5.3394 13.7058 6.0648 13.7058C6.525 13.7058 6.915 13.4484 7.11 12.996L7.7262 13.3782C7.4454 14.0256 6.837 14.4624 6.0258 14.4624C4.77 14.4624 3.9744 13.542 3.9744 12.2862C3.9744 11.0538 4.8168 10.1724 6.0102 10.1724C6.8838 10.1724 7.4376 10.6248 7.656 11.2254L6.9696 11.5764Z M10.2283 14.478C9.15189 14.478 8.27049 13.6356 8.27049 12.3096C8.27049 11.0148 9.14409 10.1724 10.2283 10.1724C11.3125 10.1724 12.1861 11.0148 12.1861 12.3096C12.1861 13.6356 11.3047 14.478 10.2283 14.478ZM10.2283 13.737C10.8133 13.737 11.2891 13.2846 11.2891 12.3096C11.2891 11.3268 10.8055 10.9134 10.2283 10.9134C9.65109 10.9134 9.16749 11.3268 9.16749 12.3096C9.16749 13.2846 9.65109 13.737 10.2283 13.737Z M15.085 10.1724C15.6856 10.1724 16.0756 10.5702 16.0756 11.28V11.826L15.3736 11.9508V11.5296C15.3736 11.1552 15.241 10.8978 14.8354 10.8978C14.3908 10.8978 14.0632 11.1942 14.0632 11.982V14.4H13.1896V10.266H14.0632V10.8198C14.2972 10.3596 14.7262 10.1724 15.085 10.1724Z M19.6851 13.0974L20.2779 13.4406C20.0439 13.9554 19.4979 14.4702 18.5541 14.4702C17.3295 14.4702 16.5885 13.5654 16.5885 12.294C16.5885 11.0382 17.3919 10.1724 18.4917 10.1724C19.4667 10.1724 20.2701 10.8276 20.2701 11.9976L20.2545 12.5124H17.4465C17.4933 13.386 17.9223 13.7604 18.6087 13.7604C19.1157 13.7604 19.4667 13.4874 19.6851 13.0974ZM18.4917 10.8588C17.9613 10.8588 17.5167 11.1396 17.4465 11.8884H19.4199C19.4277 11.1552 18.9753 10.8588 18.4917 10.8588Z"/></svg>');
  --byks-arrow-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"/></svg>');
}

.md-status--incomplete::after {
  -webkit-mask-image: var(--md-incomplete-icon);
  mask-image: var(--md-incomplete-icon);
}

.md-status--core::after {
  -webkit-mask-image: var(--byks-core-icon);
  mask-image: var(--byks-core-icon);
}

.admonition.incomplete {
  background-color: #ff91001a;
  
  .admonition-title::before {
    background-color: #ff9100;
    -webkit-mask-image: var(--md-incomplete-icon);
    mask-image: var(--md-incomplete-icon);
  }
}

/* Icon tiles used by feature cards and item lists */
.feature-cards a .twemoji,
.item-list a .twemoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 0.2rem;
  background-color: var(--md-default-fg-color--lightest);
}

/* Trailing arrow used by feature cards and item lists */
.feature-cards a::after,
.item-list li::after {
  content: "";
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--byks-arrow-icon) no-repeat center / contain;
  mask: var(--byks-arrow-icon) no-repeat center / contain;
}

/* Wide cards with an icon tile, title, and trailing arrow */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.8rem;
  margin: 1.6rem 0 2.4rem;
}

.feature-cards p {
  display: contents;
}

.feature-cards a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.8rem;
  row-gap: 0.1rem;
  padding: 0.8rem 1rem;
  border: 0.05rem solid var(--md-typeset-table-color);
  border-radius: 0.3rem;
  color: var(--md-typeset-color);
  font-size: 1.1em;
  text-decoration: none;
  transition: border-color 0.25s;
}

.feature-cards a:hover,
.feature-cards a:focus {
  border-color: var(--md-primary-fg-color);
  color: var(--md-typeset-color);
}

.feature-cards a .twemoji {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 2rem;
  height: 2rem;
}

.feature-cards a .twemoji svg {
  width: 1.3rem;
  height: 1.3rem;
}

.feature-cards a strong {
  grid-column: 2;
  grid-row: 1;
}

.feature-cards .feature-card-desc {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.75em;
  color: var(--md-default-fg-color--light);
}

.feature-cards a::after {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 1rem;
  height: 1rem;
  transition: transform 0.25s;
}

.feature-cards a:hover::after {
  transform: translateX(0.2rem);
}

.homebar {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2rem 0 4rem;
  border-top: .05rem solid var(--md-typeset-table-color);
  padding-top: 1rem;

  & > * {
    margin-top: 0;
    margin-bottom: 0;
  } 

  .md-search__button {
    background-color: var(--md-default-fg-color--lightest);
    border-radius: .4rem;
    height: 100%;
    min-height: 1.6rem;
    transition: background-color .4s, color .4s;
    width: 8.9rem;

    &::before {
      top: auto;
    }

    &::after {
      display: none;
    }
  }
}

.no-header table thead {
  display: none;
}

/* Fully clickable rows with an icon tile, title, description, and trailing arrow.
   The row is a list item holding a link and a plain-text description. The link's
   ::before stretches over the whole row to make all of it clickable. */
.md-typeset .item-list ul {
  list-style: none;
  margin-left: 0;
  padding: 0;
}

.md-typeset .item-list ul li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 1em 0;
  margin: 0;
  border-bottom: .05rem solid var(--md-typeset-table-color);
  color: var(--md-default-fg-color--light);
}

.item-list a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  grid-column: 1;
  color: var(--md-typeset-color);
  text-decoration: none;
}

.item-list a::before {
  content: "";
  position: absolute;
  inset: 0;
}

.item-list a:hover,
.item-list a:focus {
  color: var(--md-typeset-color);
}

.item-list a:hover strong,
.item-list a:focus strong {
  text-decoration: underline;
}

.item-list a .twemoji {
  width: 1.8rem;
  height: 1.8rem;
}

.item-list a .twemoji svg {
  width: 1.1rem;
  height: 1.1rem;
}

.item-list li::after {
  grid-column: 3;
  grid-row: 1;
  width: 0.9rem;
  height: 0.9rem;
  background-color: var(--md-default-fg-color--light);
}

/* Stack the description under the title on narrow screens */
@media screen and (max-width: 44.9375em) {
  .md-typeset .item-list ul li {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.2rem;
  }

  .item-list li::after {
    grid-column: 2;
  }
}