@layer objects {
    /* GROUP COMPONENTS / STARKER FRAMEWORK / TABBED INTERFACE
    =================================================== */
    /* Notes...
    
      - Based on https://inclusive-components.design/tabbed-interfaces/
      - https://codepen.io/heydon/pen/veeaEa
      - Progressively enhanced with JS
    
    */
    
    /* HTML Example...
    
      <div class="js__tabbed-interface">
          <ul>
              <li>
                  <a href="#section1">Section 1</a>
              </li>
              <li>
                  <a href="#section2">Section 2</a>
              </li>
              <li>
                  <a href="#section3">Section 3</a>
              </li>
              <li>
                  <a href="#section4">Section 4</a>
              </li>
          </ul>
          <section id="section1">
              <h2>Section 1</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod, tortor nec pharetra ultricies, ante erat imperdiet velit, nec laoreet enim lacus a velit. <a href="#">Nam luctus</a>, enim in interdum condimentum, nisl diam iaculis lorem, vel volutpat mi leo sit amet lectus. Praesent non odio bibendum magna bibendum accumsan.</p>
          </section>
          <section id="section2">
              some text
          </section>
          <section id="section3">
              some text
          </section>
          <section id="section4">
              some text
          </section>
      </div>
    
    */
    /* GROUP COMPONENTS / STARKER FRAMEWORK / TABBED INTERFACE / LAYOUT
    =================================================== */
    .o-tabbed-interface {
        [role="tablist"] {
            & li, a {
                display: inline-block;
            }
            & li {
                /* Cancel any defaults */
                padding-block-end: 0;
            }
            & a {
                padding: 0.5rem 1em;
                text-decoration: none;
                transition: all 0.2s ease-in 0s;
            }
            [aria-selected] {
                border: 2px solid;
                background: white;
                border-block-end: 0;
                position: relative;
                top: 2px;
            }
        }
        [role="tabpanel"] {
            padding: 1.5rem;
            border: 2px solid;
        }
        /* Commented this out because we're not using the mobile layout at the moment */
        /* --mq-tabbed-component-full-before */
        /* @media (max-width: 549px) {
            [role="tablist"] {
                & a {
                    border: 2px solid #222;
                }
                & li, a {
                    display: block;
                    position: static;
                }
    
                [aria-selected] {
                    position: static;
                }
                
                & li + li a {
                    border-top: 0;
                }
    
                [aria-selected] {
                    position: static;
                    &::after {
                        content: '\0020⬅';
                    }
                }
            }
            [role="tabpanel"] {
                border-top: 0;
            }
        } */
    }
    
    /* Optional Flexbox tabs */
    /* --mq-tabbed-component-full-after */
    /* @media (min-width: 550px) {
        [role="tablist"] {
            display: flex;
            max-width: 75rem;
            padding-inline: var(--spacing-l);
            margin-inline: auto;
            gap: var(--spacing-m);
        }
    
        [role="tablist"] li {
            flex-basis: 33.33%;
        }
    
        [role="tablist"] a {
            display: flex;
            justify-content: center;
        }
    } */
    
    /* GROUP OBJECTS / STARKER FRAMEWORK / TABBED INTERFACE / ACCESSIBILITY / FOCUS
    =================================================== */
    .o-tabbed-interface *:focus:focus-visible {
        outline: none;
        box-shadow: inset 0 0 0 4px var(--colour-focus);
    }
}