@use 'sass:meta';
@use 'sass:list';
@use 'sass:map';
@use '../../styles/variables';
@use '../../tag/styles/mixin' as tag;
@use 'mixin';

.thy-nav {
    display: flex;
    flex-wrap: nowrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    position: relative;
    width: 100%;

    .thy-nav-item {
        display: block;
        text-align: center;
        // fix nav link bounce when hover or active nav-item, see https://at.worktile.com/agile/items/5e5f0bf810ae8c0a4db1e53f
        // the reason is layout-header-operation has { align-items: center} style
        // set border width always regardless hover or active
        border-bottom-style: solid;
        border-bottom-width: variables.$nav-border-width;
        border-bottom-color: transparent;
        flex: 0 auto;
        white-space: nowrap;
    }

    .thy-nav-extra {
        display: inline-flex;
        align-items: center;
        flex-grow: 1;
        justify-content: flex-end;
    }

    .thy-nav-more-icon {
        margin-left: 4px;
    }

    .thy-nav-origin-active {
        .thy-nav-more-icon {
            svg {
                transform: rotate(180deg);
                transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
            }
        }
    }

    &-ink-bar {
        position: absolute;
        background: variables.$primary;
        pointer-events: none;

        &-animated {
            transition:
                left 0.3s,
                top 0.3s;
        }
    }
}

.thy-nav-pulled {
    .thy-nav-item {
        @include mixin.nav-item-variant(variables.$nav-item-color, variables.$nav-item-hover-color, null);
    }
    @include mixin.set-nav-size();
}

.thy-nav-tabs {
    @include mixin.nav-border-bottom();

    .thy-nav-item {
        z-index: 1;
        @include mixin.nav-item-variant(variables.$nav-item-color, variables.$nav-item-hover-color, null);
    }
    @include mixin.set-nav-size();
}

.thy-nav-lite {
    .thy-nav-item {
        @include mixin.nav-item-variant(variables.$nav-item-color, variables.$nav-item-hover-color, null);
    }
    @include mixin.set-nav-size(12px);
}

.thy-nav-card {
    @include mixin.nav-border-bottom();
    @include mixin.set-nav-size(0, 'card');

    .thy-nav-item {
        display: flex;
        align-items: center;
        position: relative;
        padding: 12px 20px;
        margin-right: 0;
        border: 1px solid transparent;

        &.has-right-divider {
            position: relative;
            &::after {
                content: '';
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                display: inline-block;
                height: 1rem;
                vertical-align: middle;
                border-left: 1px solid variables.$gray-300;
            }
        }

        &.active {
            &:not(.thy-nav-more-container) {
                border: 1px solid variables.$border-color;
                border-bottom-color: variables.$bg-default;
                border-bottom-width: 2px;
                border-radius: 8px 8px 0 0;

                &:first-child {
                    margin-left: 20px;
                }

                &::before,
                &::after {
                    border: 1px solid variables.$border-color;
                    position: absolute;
                    bottom: -2px;
                    width: 8px;
                    height: 8px;
                    content: '';
                }

                &::before {
                    left: -8px;
                    border-bottom-right-radius: 8px;
                    border-width: 0 1px 1px 0;
                    box-shadow: 1px 2px 0 variables.$bg-default;
                }
                &::after {
                    right: -8px;
                    border-bottom-left-radius: 8px;
                    border-width: 0 0 1px 1px;
                    box-shadow: -1px 2px 0 variables.$bg-default;
                }
            }
        }

        @include mixin.nav-item-variant(variables.$nav-item-color, variables.$nav-item-hover-color, null);
    }
}

.thy-nav-pills {
    .thy-nav-item {
        display: inline-flex;
        align-items: center;
        border-bottom-width: 0px;
        @include mixin.nav-item-size(null, variables.$nav-item-right, variables.$font-size-sm);
        @include mixin.nav-item-pills-variant(variables.$tag-default-color, variables.$nav-item-hover-color);
    }

    @each $size, $height in variables.$tag-size-heights {
        &.thy-nav-#{$size} {
            .thy-nav-item {
                $font-sizes: map.get(variables.$tag-size-font-sizes, $size);
                @include tag.tag-size(
                    $height,
                    map.get(variables.$tag-size-paddings, $size),
                    list.nth($font-sizes, 1),
                    list.nth($font-sizes, 2)
                );
            }
        }
    }
}

.thy-nav-primary {
    .thy-nav-item {
        @include mixin.nav-item-size(
            variables.$nav-item-padding-y variables.$nav-item-padding-x,
            variables.$nav-item-right,
            variables.$nav-item-font-size
        );
        @include mixin.nav-item-variant(variables.$nav-item-color, variables.$nav-item-hover-color, variables.$nav-border-bottom);
    }
}

.thy-nav-secondary {
    @include mixin.nav-border-bottom();
    .thy-nav-item {
        @include mixin.nav-item-size(
            variables.$nav-item-secondary-padding-y variables.$nav-item-secondary-padding-x,
            variables.$nav-item-secondary-right
        );
        @include mixin.nav-item-variant(variables.$nav-item-weak-color, variables.$nav-item-hover-color, variables.$nav-border-bottom);
    }
}

.thy-nav-secondary-divider {
    @include mixin.nav-border-bottom();

    .thy-nav-item {
        @include mixin.nav-item-variant(variables.$nav-item-weak-color, variables.$nav-item-hover-color, variables.$nav-border-bottom);
        @include mixin.nav-item-size(
            variables.$nav-item-secondary-padding-y variables.$nav-item-secondary-padding-x,
            variables.$nav-item-secondary-split-right
        );
        @include mixin.nav-item-divider-variant(
            variables.$nav-item-hover-color,
            variables.$nav-item-thirdly-split-line-height,
            variables.$nav-item-secondary-split-right
        );
    }
}

.thy-nav-thirdly {
    .thy-nav-item {
        @include mixin.nav-item-variant(variables.$nav-item-weak-color, variables.$nav-item-hover-color, variables.$nav-border-bottom);
        @include mixin.nav-item-size(
            variables.$nav-item-thirdly-padding-y variables.$nav-item-thirdly-padding-x,
            variables.$nav-item-thirdly-right
        );
        @include mixin.nav-item-divider-variant(
            variables.$nav-item-hover-color,
            variables.$nav-item-thirdly-split-line-height,
            variables.$nav-item-thirdly-right
        );
        @include mixin.clear-nav-item-bottom();
    }
    .thy-nav-sm {
        .thy-nav-item {
            padding: variables.$nav-item-thirdly-padding-y-sm variables.$nav-item-thirdly-padding-x-sm;
            margin-right: variables.$nav-item-thirdly-right-sm;
            font-size: variables.$font-size-sm;
            &:after {
                top: calc(50% - #{variables.$nav-item-thirdly-split-line-height-sm}/ 2);
                right: variables.$nav-item-thirdly-right-sm * 0.5 * -1;
                height: variables.$nav-item-thirdly-split-line-height-sm;
            }
        }
    }
}

.thy-layout-header .thy-nav {
    line-height: variables.$line-height-base;
}

.thy-layout-header .nav-primary {
    // 为了和字体大 2px 的标题在一条线上
    .thy-nav-item {
        padding: (variables.$nav-item-primary-padding-y + 0.0625rem) variables.$nav-item-primary-padding-x
            (variables.$nav-item-primary-padding-y - 0.0625rem) variables.$nav-item-primary-padding-x;
    }
}

.thy-nav--vertical {
    display: block;
    .thy-nav-list {
        display: block;
    }
    .thy-nav-item {
        margin-right: 0;
        text-align: left;
        border-left: variables.$nav-vertical-border-left-empty;
        // set border width as 0
        border-bottom-width: 0px;
    }
}

.thy-nav--fill {
    .thy-nav-item {
        flex: 1 1 auto;
        text-align: center;
    }
}

@include meta.load-css('./icon-nav.scss');

.thy-nav-list {
    display: flex;
    flex-wrap: nowrap;
    flex: 1 auto;
    overflow: hidden;
    position: relative;

    .thy-nav-item-hidden {
        display: none;
    }
}

.thy-nav-list-popover {
    .thy-nav-item-hidden {
        display: block;
    }
    .thy-nav-item-more,
    .thy-nav-item-more * {
        text-decoration: none;
        color: variables.$secondary;
        &:hover {
            color: variables.$gray-800;
        }
    }
}

.thy-nav-more-container {
    flex: 1 !important;
    flex-grow: 0 !important;
    white-space: nowrap;
    width: fit-content;
    min-width: fit-content;
}
