.ons-section-nav {
    &:not(&--vertical) {
        border-bottom: 1px solid var(--ons-color-borders);
    }

    &__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    &__sub {
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;
    }

    &__link {
        text-decoration: none;
        &:hover {
            color: var(--ons-color-text-link-hover);
            text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
        }
    }

    &__item {
        padding: 0;
        &--active {
            border-left: 4px solid var(--ons-color-text-link-active);
            margin-left: -1rem;
            padding-left: 0.75rem;
            a,
            h2,
            h3,
            h4,
            h5,
            h6 {
                color: var(--ons-color-text-link-active);
            }
        }
        & & {
            margin-bottom: 0.25rem;
        }
    }

    &__item-header {
        @extend .ons-u-mb-no;
        @extend .ons-u-fs-r--b;
    }

    &__sub-items {
        a {
            color: var(--ons-color-text-link);
            font-weight: $font-weight-regular;
        }
    }

    &:not(&--vertical) & {
        &__item {
            border: 0;
            border-bottom: 4px solid transparent;
            display: inline-block;
            margin: 0 1rem 0 0;
            text-align: center;
            &--active,
            &:hover {
                border-color: var(--ons-color-text-link-active);
                padding: 0;
                a,
                h2,
                h3,
                h4,
                h5,
                h6 {
                    color: var(--ons-color-text-link-active);
                }
            }
        }

        &__link {
            text-decoration: none;
            &:hover {
                text-decoration: none;
            }
        }
    }
}