@use "../../styles/mixins/hover.scss";
@use "../../styles/variables.scss";

@mixin icon-nav-link-variant($color, $hover-color, $hover-bg-color) {
    color: $color;
    padding: variables.$icon-nav-link-padding-y variables.$icon-nav-link-padding-x;
    // 解决图标不居中问题
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;

    &.active {
        color: $hover-color;
        text-decoration: none;
        background: $hover-bg-color;
        border-radius: variables.$border-radius;
        // 统一所有操作active状态下，标签展示
        visibility: visible !important;
    }
    @include hover.hover {
        color: $hover-color;
        text-decoration: none;
        background: $hover-bg-color;
        border-radius: variables.$border-radius;
    }

    // Disabled state lightens text
    &.disabled {
        color: variables.$nav-item-disabled-color;
        border-bottom: none;
    }
}

@mixin icon-nav-link-size($padding, $margin-right) {
    padding: $padding;
    margin-right: $margin-right;
    &:last-child {
        margin-right: 0;
    }
}

.thy-icon-nav-link {
    transition: opacity 0.2s ease-in-out;
    @include icon-nav-link-variant(variables.$icon-nav-link-color, variables.$icon-nav-link-hover-color, rgba(variables.$primary, 0.1));
}

.thy-icon-nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    .thy-icon-nav-link {
        @include icon-nav-link-size(
            variables.$icon-nav-link-padding-y variables.$icon-nav-link-padding-x,
            variables.$icon-nav-link-spacing
        );
    }
}

.thy-icon-nav-secondary {
    .thy-icon-nav-link {
        @include icon-nav-link-size(
            variables.$icon-nav-link-padding-y variables.$icon-nav-link-padding-x,
            variables.$icon-nav-link-secondary-spacing
        );
        // @include icon-nav-link-variant(
        //     variables.$icon-nav-link-secondary-color,
        //     variables.$icon-nav-link-hover-color,
        //     rgba(variables.$primary, 0.1)
        // );
    }
}

.thy-icon-nav-individual {
    .thy-icon-nav-link {
        @include icon-nav-link-size(
            variables.$icon-nav-link-padding-y variables.$icon-nav-link-padding-x,
            variables.$icon-nav-link-individual-spacing
        );
        // @include icon-nav-link-variant(
        //     variables.$icon-nav-link-secondary-color,
        //     variables.$icon-nav-link-hover-color,
        //     rgba(variables.$primary, 0.1)
        // );
    }
}
