@layer block {
  /* stylelint-disable value-keyword-case, comment-empty-line-before, no-descending-specificity */

  main .section.quick-links-bar-container {
    container: quicklinks / inline-size;
    padding-block-end: 0;

    @media (width >= 1024px) {
      padding-block-end: var(--gutter-m);
    }
  }

  main .section.quick-links-bar-container.full-bleed {
    padding: 0 0 var(--gutter-m) 0;

    @media (width >= 1024px) {
      padding: 0 var(--gutter-m);
    }
  }

  main .section.quick-links-bar-container > div {
    max-width: 100%;
  }

  .quick-links-bar {
    margin-block: var(--spacing-m);
  }

  .quick-links-bar ul {
    margin: 0;
    padding: 0 0 0.5em;
    list-style: none;
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .quick-links-bar ul li {
    padding: 0.2em var(--gutter-xxl);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

  .quick-links-bar ul li a {
    text-decoration: none;
  }

  /* with icons */
  .quick-links-bar.icons ul li {
    padding: 0.2em 0;
    display: grid;
    place-content: center;
    flex: 1 0 max(14rem, 30%);

    @media (width > 600px) {
      flex: 1 0 max(3rem, 12%);
      padding: 0.2em 0;
    }
  }

  .quick-links-bar.icons ul li a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gutter-xs);
  }

  .quick-links-bar.icons.icons-inline ul li a {
    text-decoration: none;
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: var(--gutter-xs);
  }

  .quick-links-bar.icons ul li img {
    max-height: 3rem;
  }

  .quick-links-bar.icons.icons-lg ul li img {
    max-height: 5rem;
  }

  .quick-links-bar.icons.icons-lg ul li a:has(img) {
    font-size: 70%;
  }

  /* remove overflow */
  .quick-links-bar.no-overflow ul {
    overflow-x: unset;
  }

  .quick-links-bar.no-overflow ul li {
    flex: 1 1;
  }

  @media (width >= 600px) {
    .quick-links-bar.no-overflow-lg ul {
      overflow-x: unset;
    }

    .quick-links-bar.no-overflow-lg ul li {
      flex: 1 1;
    }
  }

  /* dividers */
  .quick-links-bar.dividers li:not(:last-of-type) {
    border-right: 2px solid currentColor;
  }

  /* champion */
  /* ========================================= */
  body:has(header.header-champion-wrapper) .quick-links-bar-container,
  .quick-links-bar-container:has(.chp) {
    padding: 0 0 0 var(--gutter-m);

    @media (width > 1023px) {
      padding: 0;
    }
  }

  body:has(header.header-champion-wrapper)
    .quick-links-bar-container
    li:not(:last-of-type),
  .quick-links-bar-container:has(.chp) li:not(:last-of-type) {
    border-right: 2px solid var(--text-color);
  }

  body:has(header.header-champion-wrapper) .quick-links-bar-container li a,
  .quick-links-bar-container:has(.chp) li a {
    font-weight: var(--fw-bold);
    font-size: max(var(--body-font-size-m), calc(1rem + 0.7vw));
  }
}