@import "./base/var";
@import "./mixins/index.scss";


@mixin tabSize($size) {
    $font-size: $--font-size-default;
    $nav-item-wrap-margin-right: 12px;
    $nav-item-padding-horizontal: 16px;
    $nav-item-padding-vertical: 8px;

    @if ($size == mini) {
        $font-size: $--font-size-mini;
        $nav-item-wrap-margin-right: 4px;
        $nav-item-padding-horizontal: 12px;
        $nav-item-padding-vertical: 4px;
    } @else if ($size == small) {
        $font-size: $--font-size-small;
        $nav-item-wrap-margin-right: 8px;
        $nav-item-padding-horizontal: 14px;
        $nav-item-padding-vertical: 6px;
    } @else if ($size == large) {
        $font-size: $--font-size-large;
        $nav-item-wrap-margin-right: 16px;
        $nav-item-padding-horizontal: 16px;
        $nav-item-padding-vertical: 8px;
    }

    @include e(header, false) {
        font-size: $font-size;
    }
    @include e(nav-item-wrap, false) {
        margin-right: $nav-item-wrap-margin-right;
        & > {
            @include e(nav-item, false) {
                padding: $nav-item-padding-vertical $nav-item-padding-horizontal;
            }
        }
        &:nth-last-of-type(1) {
            margin: 0;
        }
    }
}

@include c(tabs) {
    width: 100%;
    @include e(header) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: $--border-default;
    }
    @include e(nav-wrap) {
        flex: 1;
        width: 100%;
        margin-bottom: -1px;
    }
    @include e(nav) {
        display: inline-block;
        white-space: nowrap;
    }
    @include e(nav-item-wrap) {
        display: inline-block;
        cursor: pointer;
        position: relative;

        @include when(active) {
            & > {
                @include e(nav-item, false) {
                    color: $--color-primary;
                    border-bottom: 2px solid $--color-primary;
                }
            }
        }
        @include when(disabled) {
            cursor: not-allowed;
            & > {
                @include e(nav-item, false) {
                    opacity: $--opacity-disabled;
                }
            }
        }

        &:not(.is-disabled):hover {
            color: $--color-primary;
        }
    }
    @include e(nav-item) {
        background-color: $--color-white;
        border-top-left-radius: $--border-radius-default;
        border-top-right-radius: $--border-radius-default;
    }
    @include e(nav-item-name) {
        display: inline-block;
    }
    @include e(close) {
        margin-left: 10px;
        vertical-align: middle;
        color: $--color-text-default;
        line-height: normal;

        &:hover {
            color: $--color-text-title;
        }
    }
    @include e(extra) {

    }


    @include m(left) {
        @include e(nav-wrap, false) {
            align-items: flex-start;
            order: 0;
        }
        @include e(extra, false) {
            align-items: flex-end;
            order: 1;
        }
    }
    @include m(center) {
        @include e(nav-wrap, false) {
            align-items: center;
            order: 0;
            text-align: center;
        }
        @include e(extra, false) {
            align-items: flex-end;
            order: 1;
        }
    }
    @include m(right) {
        @include e(nav-wrap, false) {
            align-items: flex-end;
            order: 1;
            text-align: right;
        }
        @include e(extra, false) {
            align-items: flex-start;
            order: 0;
        }
    }

    @include e(wrap) {
        overflow: hidden;
        background-color: $--color-white;
    }
    @include e(content) {
        display: flex;
    }
    @include e(content-animation) {
        transition: all $--animation-time;
    }


    @include m(mini) {
        @include tabSize(mini)
    }

    @include m(small) {
        @include tabSize(small)
    }

    @include m(default) {
        @include tabSize(default)
    }

    @include m(large) {
        @include tabSize(large)
    }


    @include m(card) {
        @include e(nav-item-wrap, false) {
            margin-right: 4px;

            & > {
                @include e(nav-item, false) {
                    border-top: $--border-default;
                    border-left: $--border-default;
                    border-right: $--border-default;
                    border-top-left-radius: $--border-radius-default;
                    border-top-right-radius: $--border-radius-default;
                    position: relative;
                    bottom: -1px;
                    left: 0;
                }
            }

            @include when(active) {
                & > {
                    @include e(nav-item, false) {
                        border-bottom: 2px solid $--color-white;
                    }
                }

                &:after {
                    content: "";
                    position: absolute;
                    bottom: -1px;
                    left: 0;
                    width: 100%;
                    border-bottom: 2px solid $--color-white;
                }
            }
        }
    }

    @include m(border) {
        @include e(wrap, false) {
            border-left: $--border-default;
            border-right: $--border-default;
            border-bottom: $--border-default;
        }
    }
}

@include c(tab-pane) {
    width: 100%;
    padding: 16px;
    flex-shrink: 0;
    background-color: $--color-white;
}
