htmx-learning/style/_header.scss

header {
    @include bg-secondary;
    nav {
        ul {
            list-style-type: none;
            list-style: none;
            margin: 0;
            padding: 0;

            li {
                float: left;

                a {
                    display: block;
                    text-decoration: none;
                    color: inherit;
                    text-align: center;
                    padding: 0.8em 1em;
                    transition: 0.4s;
                    cursor: pointer;
                    @include disable-select;

                    &.active {
                        @include bg-primary;
                    }

                    &:hover,
                    &:focus {
                        @include bg-accent;
                    }
                }
            }
        }
    }
}