@import './navigation/desktop-nav.css';
@import './navigation/mobile-nav.css';

.navbar-lang {
    display: flex;
    list-style: none;
    margin-bottom: 0;

    a {
        color: var(--link-color-default);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.875rem;

        @container screen (min-width: 62rem) {
            font-size: 1rem;
        }

        &:after {
            background-color: var(--link-color-default);
        }

        &:hover {
            color: var(--link-color-hover);
        }
    }

    li {
        padding-left: 0.5rem;

        &.active {
            a {
                position: relative;

                &:after {
                    content: '';
                    position: absolute;
                    width: 125%;
                    height: 1px;
                    left: -12.5%;
                    bottom: -2px;
                }
            }
        }

        &:last-child {
            margin-right: 0;
        }
    }
}