@import '../../styles/var.less';

@tabBorderColor: @colorComponentItemBorder;
@tabBorderHoverColor: @colorComponentItemBorderHover;
@tabBorderCurrentColor: @colorComponentItemBorderCurrent;
@tabBorderDisabledColor: @colorComponentItemBorderDisabled;
@tabBgColor: @colorComponentItemBg;
@tabBgHoverColor: @colorComponentItemBgHover;
@tabBgCurrentColor: @colorComponentItemBgCurrent;
@tabBgDisabledColor: @colorComponentItemBgDisabled;
@tabFontColor: @colorNeutral9;
@tabFontHoverColor: @colorNeutral10;
@tabFontCurrentColor: @colorComponentItemFontCurrent;
@tabFontDisabledColor: @colorComponentItemFontDisabled;

mor-tab{
    > ul{
        list-style: none;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 0;
        position: relative;

        > li{
            display: inline-block;
            font-size: @fontSize*0.875;
            padding: 0.5em 1em;
            margin: 0 0.1em;
            color: @tabFontColor;
            position: relative;
            background-color: @tabBgColor;
            cursor: pointer;
            border: 1px @tabBorderColor solid;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            + li{
                margin-top: 0 !important;
            }

            > div > i,
            > div > i.iconfont,
            > div > i.mo-icon{
                font-size: @fontSize*0.75;
            }

            &:first-child{
                margin-left: 0;
            }

            &:hover{
                background-color: @tabBgHoverColor;
                color: @tabFontHoverColor;
            }

            &.current{
                background-color: @tabBgCurrentColor;
                color: @tabFontCurrentColor;
                border-color: @tabBorderCurrentColor;
                z-index: 5;
                cursor: default;
            }

            &.disabled{
                background-color: @tabBgDisabledColor;
                color: @tabFontDisabledColor;
                border-color: @tabBorderDisabledColor;
                cursor: not-allowed;
            }
        }
    }

    > .contents{
        border: 1px @tabBorderCurrentColor solid;
        position: relative;

        > .tab-item{
            pointer-events: none;
            height: 0;
            overflow: hidden;

            &.current{
                padding: @fontSize;
                pointer-events: auto;
                height: auto;
                overflow: visible;
            }
        }
    }

    &.position-top,
    &.position-bottom{}

    &.position-top{
        > ul{
            > li{
                border-radius: @borderRadius @borderRadius 0 0;
                border-bottom-width: 0;
                top: 1px;
            }
        }
    }

    &.position-bottom{
        > ul{
            > li{
                border-radius: 0 0 @borderRadius @borderRadius;
                border-top-width: 0;
                bottom: 1px;
            }
        }
    }

    &.position-left,
    &.position-right{
        font-size: 0;

        > ul{
            width: 20%;
            max-width: @fontSize*10;
            display: inline-block;

            > li{
                width: 100%;
                border-bottom-width: 1px;
                margin: 0.1em 0;
                top: 0;

                &:first-child{
                    margin-top: 0;
                }

                &:last-child{
                    margin-bottom: 0;
                }
            }
        }

        > .contents{
            font-size: @fontSize*0.875;
            display: inline-block;
            vertical-align: top;
        }
    }

    &.position-left{
        > ul{
            > li{
                border-radius: @borderRadius 0 0 @borderRadius;
                border-right-width: 0;
                left: 1px;
            }
        }
    }

    &.position-right{
        > ul{
            > li{
                border-radius: 0 @borderRadius @borderRadius 0;
                border-left-width: 0;
                left: -1px;
            }
        }
    }

    &.position-right,
    &.position-bottom{
        > .contents{
            z-index: 2;
        }
    }

    &.no-padding{
        > .contents{
            > .tab-item.current{
                padding: 0;
            }
        }
    }

    &.block{
        > ul{
            display: flex;

            > li{
                margin: 0;
                display: block;
                border: 1px @tabBorderCurrentColor solid;
                background-color: @tabBgColor;
                padding: 1em 0;
                text-align: center;
                flex: 1;
                border-radius: 0;

                &:hover{
                    background-color: @tabBgHoverColor;
                    color: @tabFontHoverColor;
                }

                &.current{
                    border-color: @tabBorderCurrentColor;
                    background: @tabBgCurrentColor;
                    color: @tabFontCurrentColor;
                }

                &.disabled{
                    background-color: @tabBgDisabledColor;
                    color: @tabFontDisabledColor;
                    border-color: @tabBorderDisabledColor;
                }
            }
        }

        &.position-top,
        &.position-bottom{
            > ul{
                > li{
                    &:not(:last-child){
                        border-right-width: 0;
                    }
                }
            }
        }

        &.position-top{
            > ul{
                > li{
                    &.current{
                        border-top: 1px @colorTheme solid;
                        border-bottom-width: 0;
                        box-shadow: inset 0 3px 0 @colorTheme;
                    }
                }
            }
        }

        &.position-bottom{
            > ul{
                > li{
                    &.current{
                        border-bottom: 1px @colorTheme solid;
                        border-top-width: 0;
                        box-shadow: inset 0 -3px 0 @colorTheme;
                    }
                }
            }
        }

        &.position-left,
        &.position-right{
            ul{
                display: inline-block;

                > li{
                    &:not(:last-child){
                        border-bottom-width: 0;
                        // border-right-width: 1px;
                    }

                    &.current{
                        border-top: 1px @tabBorderCurrentColor solid;

                        &:last-child{
                            border-bottom-width: 1px;
                        }
                    }
                }
            }
        }

        &.position-left{
            ul{
                > li{
                    &.current{
                        border-left: 1px @colorTheme solid;
                        box-shadow: inset 3px 0 0 @colorTheme;
                        border-right-width: 0;
                    }
                }
            }
        }

        &.position-right{
            ul{
                > li{
                    &.current{
                        border-right: 1px @colorTheme solid;
                        box-shadow: inset -3px 0 0 @colorTheme;
                        border-left-width: 0;
                    }
                }
            }
        }
    }

    &.line{
        > ul::before{
            content: ' ';
            position: absolute;
            background: @tabBorderColor;
        }

        > ul > li{
            border: none;
            margin: 0;
            padding: 0.5em 1.3em;
            top: 0;
            background: transparent;

            &:hover{
                color: @tabFontHoverColor;
            }

            &.current{
                color: @tabFontCurrentColor;
            }

            &.disabled{
                color: @tabFontDisabledColor;
            }
        }

        &.position-top,
        &.position-bottom{
            > ul::before{
                width: 100%;
                height: 2px;
                left: 0;
            }
        }

        &.position-top{
            > ul::before{
                bottom: 0;
            }

            > ul{
                > li{
                    border-bottom: 2px @tabBorderCurrentColor solid;

                    &:hover{
                        border-bottom-color: @tabBorderHoverColor;
                    }

                    &.current{
                        border-bottom-color: @colorTheme;
                    }

                    &.disabled{
                        border-bottom-color: darken(@tabBorderDisabledColor, 20%);
                    }
                }
            }

            > .contents{
                border-top-width: 0;
            }
        }

        &.position-bottom{
            > ul::before{
                top: 0;
            }

            > ul{
                > li{
                    border-top: 2px @tabBorderCurrentColor solid;

                    &:hover{
                        border-top-color: @tabBorderHoverColor;
                    }

                    &.current{
                        border-top-color: @colorTheme;
                    }

                    &.disabled{
                        border-top-color: darken(@tabBorderDisabledColor, 20%);
                    }
                }
            }

            > .contents{
                border-bottom-width: 0;
            }
        }

        &.position-left,
        &.position-right{
            > ul::before{
                height: 100%;
                width: 2px;
                top: 0;
            }

            > ul > li{
                border-bottom-width: 0;
                left: 0;

                &:hover{
                    border-bottom-color: @tabBorderColor;
                }
            }

            > .contents{
                border-top-width: 1px;
            }
        }

        &.position-left{
            > ul::before{
                left: auto;
                right: 0;
            }

            > ul > li{
                border-right: 2px @tabBorderCurrentColor solid;

                &:hover{
                    border-right-color: @tabBorderHoverColor;
                }

                &.current{
                    border-right-color: @colorTheme;
                }
            }

            > .contents{
                border-left-width: 0;
            }
        }

        &.position-right{
            > ul::before{
                left: 0;
                right: auto;
            }

            > ul > li{
                border-left: 2px @tabBorderCurrentColor solid;

                &:hover{
                    border-left-color: @tabBorderHoverColor;
                }

                &.current{
                    border-left-color: @colorTheme;
                }
            }

            > .contents{
                border-right-width: 0;
            }
        }
    }

    &.btn{
        > ul > li{
            border: 1px @tabBorderColor solid;
            border-radius: 0;
            margin: 0;
            padding: 0.5em 1.3em;
            top: 0;
            background: @tabBgColor;

            &:hover{
                border-color: @tabBorderHoverColor;
                color: @tabFontHoverColor;
            }

            &.current{
                color: @tabFontCurrentColor;
                background-color: @tabBgCurrentColor;
                border-color: @colorTheme;
            }

            &.disabled{
                color: @tabFontDisabledColor;
                background-color: @tabBgDisabledColor;
                border-color: @tabBorderDisabledColor;
            }
        }

        &.position-top,
        &.position-bottom{
            > ul{
                > li{
                    border-right-width: 0;

                    &:first-child{
                        border-radius: @borderRadius 0 0 @borderRadius;
                    }

                    &:last-child{
                        border-radius: 0 @borderRadius @borderRadius 0;
                        border-right-width: 1px;
                    }

                    &:hover{
                        + li{
                            border-left: 1px @tabBorderHoverColor solid;
                        }

                        + li.current{
                            border-left: 1px @colorTheme solid;
                        }
                    }

                    &.current{
                        border-right-width: 1px;

                        + li{
                            border-left-width: 0;
                        }
                    }
                }
            }
        }

        &.position-top{
            > .contents{
                margin-top: @fontSize/2;
            }
        }

        &.position-bottom{
            > .contents{
                margin-bottom: @fontSize/2;
            }
        }

        &.position-left,
        &.position-right{
            > ul{
                width: calc(20% - @fontSize/2);
            }

            > ul > li{
                border-bottom-width: 0;
                padding: 0.5em;
                left: 0;

                &:first-child{
                    border-radius: @borderRadius @borderRadius 0 0;
                }

                &:last-child{
                    border-bottom: 1px @tabBorderColor solid;
                    border-radius: 0 0 @borderRadius @borderRadius;
                }

                &:hover{
                    border-bottom-color: @tabBorderHoverColor;

                    + li{
                        border-top-width: 1px;
                        border-top-color: @tabBorderHoverColor;
                    }

                    + li.current{
                        border-top: 1px @colorTheme solid;
                    }
                }

                &.current{
                    border-bottom: 1px @colorTheme solid;

                    + li{
                        border-right-width: 1px;
                        border-top-width: 0;
                    }
                }
            }

            > .contents{
                margin-top: 0;
            }
        }

        &.position-left{
            > ul > li{
                border-right-width: 1px;

                &:hover{
                    + li{
                        border-left-color: @tabBorderColor;
                        border-left-width: 1px;
                    }

                    + li.current{
                        border-left-color: @colorTheme;
                        border-left-width: 1px;
                    }
                }

                &.current{
                    + li{
                        border-left-width: 1px;
                    }
                }
            }

            > .contents{
                margin-left: @fontSize/2;
            }
        }

        &.position-right{
            > ul > li{
                border-left-width: 1px;

                &:hover{
                    + li{
                        border-right-color: @tabBorderColor;
                        border-right-width: 1px;
                    }

                    + li.current{
                        border-right-color: @colorTheme;
                        border-right-width: 1px;
                    }
                }

                &.current{
                    + li{
                        border-right-width: 1px;
                    }
                }
            }

            > .contents{
                margin-right: @fontSize/2;
            }
        }
    }

    &.noborder{
        > .contents{
            border-left-width: 0;
            border-right-width: 0;
        }

        &.position-top{
            > .contents{
                border-bottom-width: 0;
            }
        }

        &.position-bottom{
            > .contents{
                border-top-width: 0;
            }
        }

        &.position-left,
        &.position-right{
            > .contents{
                border-top-width: 0;
                border-bottom-width: 0;
            }
        }

        &.position-left{
            > .contents{
                border-left-width: 1px;
            }
        }

        &.position-right{
            > .contents{
                border-right-width: 1px;
            }
        }
    }

    // default status
    &{}
}