@layer components {
    content-tabs {
        &:not(.clean) .content-tabs-nav-wrapper {
            border-bottom: 1px solid var(--color-border-grey);
        }

        :is(nav) {

            :is(ul) {
                display: flex;
                list-style-type: none;
                padding: 0;
                margin: 0;
                gap: var(--size-0);
                justify-content: flex-start;
                align-items: center;
            }

            :is(select) {
                width: 100%;
                padding: var(--size-2);
                font-weight: var(--font-weight-5);
            }

            & .content-tab {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: var(--size-2);
                cursor: pointer;
                transition: background-color 0.3s ease;

                :has(:is(input, option)[disabled]) {
                    opacity: 0.5;
                    cursor: not-allowed;
                }

                :is(a) {
                    text-decoration: none;
                    color: var(--color-dark);
                    font-weight: var(--font-weight-5);
                    font-size: var(--font-size-2);
                }

                :is(label) {
                    width: 100%;
                    padding: var(--size-2) var(--size-7);
                    border-bottom: 4px solid transparent;
                    font-size: var(--font-size-1);
                    font-weight: var(--font-weight-7);
                    cursor: pointer;

                    &:hover {
                        border-bottom: 4px solid var(--color-border-grey);
                    }

                    &:has(input[type="radio"]:checked) {
                        color: var(--color-button-blue);
                        border-bottom: 4px solid var(--color-blue);
                    }
                }

                :is(input[type="radio"]) {

                    /* Using 0 size and absolute position instead of hiding the radio so keyboard nav works using standard elements */
                    /* We could use display none but then keyboard navigation would need to be implement in JS */
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 0;
                    height: 0;
                    opacity: 0;
                }

                & .tab-icon {
                    height: 26px;
                    width: auto;
                    margin: 0 var(--size-2);
                }
            }
        }

        &[responsive-nav] {
            :is(nav) .content-tab-select {
                display: none;
            }

            /* tablet and down */
            @media screen and (max-width: 768px) {

                & .content-tabs-nav-wrapper {
                    border-bottom: none;
                }

                :is(nav) {

                    & .content-tab-select {
                        display: block;
                    }

                    & .content-tab-buttons {
                        display: none;
                    }
                }
            }
        }
    }

    content-tab-window {

        display: grid;
        gap: var(--size-3);

        :is(h1, h2, h3, h4, h5, h6) {
            font-size: var(--font-size-4);
            font-weight: var(--font-weight-7);
        }

        & content-tab-window-item {
            display: block;

            &[hidden] {
                display: none;
            }

            & pre {
                white-space: wrap;
            }
        }

        & .category-disclaimer {
            color: var(--color-red);
        }

        & .brand-blurb {
            display: grid;
            gap: var(--size-3);

            :is(img) {
                width: auto;
                height: 100px;
            }
        }
    }
}