@import '../core/variables.less';
@import '../theme/index.less';

@ant-card: ant-card;
@ant-tabs: ant-tabs;

.@{ant-card} {
    &.@{mi-prefix}card-tab {
        background: transparent;
        border: unset;

        .@{ant-card} {
            &-head {
                border-bottom-color: var(--mi-theme, @mi-theme);
                border-bottom: unset;
                margin-bottom: unset;
                padding-left: 0;
                padding-right: 0;

                & .@{ant-tabs} {
                    margin-bottom: 0;

                    &-nav {
                        &:before {
                            border-bottom: none;
                        }

                        &-list {
                            .linear-gradient-background();
                            .properties(padding-left, 16);
                            .properties(padding-right, 16);
                            .border-radius(64);
                            border: 1px solid;
                            border-color: var(--mi-card-nav-list-border, @mi-card-nav-list-border);

                            @media only screen and (max-width: 767px) {
                                padding: 0px;
                                border-radius: 0px;
                                background: transparent;
                                border: none;
                            }
                        }

                        & &-more {
                            .anticon {
                                color: var(--mi-card-tab-more-icon, @mi-card-tab-more-icon);
                            }
                        }
                    }

                    &-bar {
                        border-bottom-color: var(--mi-theme, @mi-theme);
                    }

                    &-ink-bar {
                        .properties(bottom, 12);
                        height: calc(100% - 24px);
                        .border-radius(64);
                        .linear-gradient-background-theme();
                        z-index: -1;
                    }

                    &-tab {
                        color: var(--mi-card-tab-text, @mi-card-tab-text);
                        .border-radius();
                        .properties(padding-left, 16);
                        .properties(padding-right, 16);
                        .properties(padding-top, 16);

                        @media only screen and (max-width: 767px) {
                            .properties(margin-left, 16);

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

                        >div,
                        >div:hover,
                        >div:focus {
                            font-weight: 700;
                            .properties(font-size, 14);
                            text-shadow: none;
                            color: var(--mi-card-tab-text, @mi-card-tab-text);
                        }

                        &-active {

                            >div,
                            >div:hover,
                            >div:focus {
                                color: var(--mi-card-tab-active-text, @mi-card-tab-active-text);
                            }

                        }
                    }
                }
            }

            &-body {
                color: var(--mi-font, @mi-font);
                border: 1px solid;
                border-color: var(--mi-border, @mi-border);
                .border-radius();
                .linear-gradient-background();
            }
        }
    }

    &.@{mi-prefix}card-body-custom {
        .@{ant-card} {
            &-body {
                padding: 0;
                border: unset;
                margin: 0;
                background: transparent;
            }
        }
    }
}