@alifd/next/es/nav/scss/mixin.scss

// nav mixins
// --------------------------------------------------

@mixin nav-size(
    $direction,
    $height,
    $fontSize,
    $padding,
    $marginTB,
    $marginLR,
    $itemCorner
) {
    line-height: $height;
    font-size: $fontSize;

    #{$menu-prefix}-item#{$nav-prefix}-item {
        margin-left: $marginLR;
        margin-right: $marginLR;
        padding: 0 $padding;
        border-radius: $itemCorner;
    }

    @if $direction == 'ver' {
        #{$menu-prefix}-item:not(:first-child),
        #{$menu-prefix}-sub-menu-wrapper:not(:first-child) > #{$menu-prefix}-item {
            margin-top: $marginTB;
        }

        #{$menu-prefix}-item:not(:last-child),
        #{$menu-prefix}-sub-menu-wrapper:not(:last-child) > #{$menu-prefix}-item {
            margin-bottom: $marginTB;
        }
    } @else {
        #{$menu-prefix}-item,
        #{$menu-prefix}-sub-menu-wrapper > #{$menu-prefix}-item {
            margin-top: $marginTB;
            margin-bottom: $marginTB;
        }
    }

    #{$menu-prefix}-item-inner {
        height: $height;
        font-size: $fontSize;
    }

    #{$menu-prefix}-item#{$nav-prefix}-item#{$nav-prefix}-with-title {
        line-height: 1;
        padding: $s-3 $s-2;

        #{$menu-prefix}-item-inner {
            height: auto;
            min-height: $height;
        }
        #{$nav-prefix}-text {
            display: block;
            line-height: 1;
            margin-top: $s-2;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

@mixin nav-border-fix($height, $border-width) {
    $real-height: calc(#{$height} - #{$border-width} * 2);

    border-width: $border-width;
    &.#{$css-prefix}hoz {
        line-height: $height;
        line-height: $real-height;

        #{$menu-prefix}-header,
        #{$menu-prefix}-footer,
        #{$menu-prefix}-item-inner {
            line-height: $height;
            height: $real-height;
        }

        &.#{$css-prefix}top #{$nav-prefix}-item:before {
            top: 0;
            top: calc(0px - #{$border-width});
        }

        &.#{$css-prefix}bottom #{$nav-prefix}-item:before {
            bottom: 0;
            bottom: calc(0px - #{$border-width});
        }
    }
    &.#{$css-prefix}ver {
        &.#{$css-prefix}left #{$nav-prefix}-item:before {
            left: 0;
            left: calc(0px - #{$border-width});
        }

        &.#{$css-prefix}right #{$nav-prefix}-item:before {
            right: 0;
            right: calc(0px - #{$border-width});
        }
    }
}

@mixin nav-statement(
    $bgColor,
    $borderColor,
    $textColor,
    $textWeight,
    $shadow,
    $hoverBgColor,
    $hoverColor,
    $hoverWeight,
    $selectedBgColor,
    $selectedColor,
    $selectedWeight,
    $activeColor,
    $hoverLineColor,
    $openedBgColor,
    $openedColor,
    $groupColor,
    $groupWeight,
    $childSelectedBgColor,
    $childSelectedColor,
    $childSelectedWeight,
) {
    background: $bgColor;
    border-color: $borderColor;
    color: $textColor;
    font-weight: $textWeight;
    box-shadow: $shadow;

    #{$nav-prefix}-item#{$menu-prefix}-item {
        background: $bgColor;
        color: $textColor;

        &.#{$css-prefix}focused,
        &:hover {
            background: $hoverBgColor;
            color: $hoverColor;
            font-weight: $hoverWeight;
        }

        &.#{$css-prefix}selected {
            background: $selectedBgColor;
            color: $selectedColor;
            font-weight: $selectedWeight;
        }

        &.#{$css-prefix}opened {
            background: $openedBgColor;
            color: $openedColor;
        }

        &.#{$css-prefix}child-selected {
            font-weight: $childSelectedWeight;
            background: $childSelectedBgColor;
            color: $childSelectedColor;
        }

        &.#{$css-prefix}opened.#{$css-prefix}nav-popup {
            color: $openedColor;
        }

        &.#{$css-prefix}child-selected.#{$css-prefix}nav-popup {
            color: $childSelectedColor;
        }

        &:before {
            background: $activeColor;
        }
        &:hover:before {
            background: $hoverLineColor;
        }
    }

    #{$menu-prefix}-sub-menu #{$menu-prefix}-item.#{$css-prefix}opened {
        background: $openedBgColor;
        color: $openedColor;
    }

    #{$nav-prefix}-group-label {
        color: $groupColor;
        font-weight: $groupWeight;
    }
}

@mixin sub-nav-statement(
    $textColor,
    $textWeight,
    $bgColor,
    $hoverBgColor,
    $hoverColor,
    $selectedBgColor,
    $selectedColor,
    $activeColor
) {
    #{$menu-prefix}-sub-menu #{$menu-prefix}-item {
        background: $bgColor;
        color: $textColor;
        font-weight: $textWeight;

        &.#{$css-prefix}focused,
        &:hover {
            background: $hoverBgColor;
            color: $hoverColor;
        }

        &.#{$css-prefix}selected {
            background: $selectedBgColor;
            color: $selectedColor;
        }
    }
}

@mixin icon-only-size(
    $border-width
) {
    #{$nav-prefix}-icon.#{$css-prefix}icon {
        @include icon-size(
            $size: $nav-icon-only-font-size,
            $marginLeft: calc((#{$nav-icononly-width} - #{$nav-icon-only-font-size}) / 2 - #{$nav-ver-item-padding-lr}),
            $marginRight: calc((#{$nav-icononly-width} - #{$nav-icon-only-font-size}) / 2 - #{$nav-ver-item-padding-lr})
        );
        @include icon-size(
            $size: $nav-icon-only-font-size,
            $marginLeft: calc((#{$nav-icononly-width} - #{$nav-icon-only-font-size}) / 2 - #{$nav-ver-item-padding-lr} - #{$border-width}),
            $marginRight: calc((#{$nav-icononly-width} - #{$nav-icon-only-font-size}) / 2 - #{$nav-ver-item-padding-lr} - #{$border-width})
        );
    }
}

@mixin nav-disabled-statement($color) {
    #{$nav-prefix}-item.#{$css-prefix}menu-item {
        &.#{$css-prefix}disabled,
        &.#{$css-prefix}disabled #{$menu-prefix}-item-text > a {
            color: $color;
            cursor: not-allowed;

            #{$menu-prefix}-icon-arrow {
                color: $color;
            }

            #{$menu-prefix}-icon-selected {
                color: $color;
            }
        }
    }
}