Navigation Item: Default

.navigation-item {
    position: relative;
    margin: 0;
    font-size: size(2.5);
    line-height: size(4);
    background: $color-gray-1;
    color: $color-gray-5;
    padding: 8px;
    display: inline-flex;
    align-items: center;

    @include breakpoint(0, $s) {
        font-size: size(2);
        line-height: size(4);
    }

    &:hover {
        background: $color-green-pale;
        text-decoration: none;
    }

    &--active {
        background: $color-green-pale;
        pointer-events: none;
        color: $color-green-dark;

        &:after {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            content: '';
            height: 3px;
            background: $color-green-dark;

            @include breakpoint(0, $s) {
                height: 2px;
            }
        }

        .navigation-item__icon {
            margin-left: 8px;
            width: 32px;
            height: 32px;
            border-radius: 100%;
            border: 2px solid $color-green-dark;
            display: flex;
            align-items: center;
            justify-content: center;
    
            @include breakpoint(0, $s) {
                width: 24px;
                height: 24px;
            }
    
            .icon {
                width: 16px;
                height: 16px;
                fill: $color-green-dark;
    
                @include breakpoint(0, $s) {
                    width: 12px;
                    height: 12px;
                }
            }
        }
    }

    &--subcategory {
        .navigation-item__icon {
            margin-left: 8px;
            display: flex;
            align-items: center;
            justify-content: center;

            .icon {
                width: 16px;
                height: 16px;
            }
        }
    }

    &__text {
        position: relative;
    }
}