@import "../settings/_mixins";
@import "../settings/_variables";

.dnetor-tabs {
    --tab_border_width: 2px;
    --start_of_pos: 0px;
    --tab_underline_border_width: 3px;
    margin: 50px auto;

    .dnetor-tabs-header {
        @include d-flex();
    }
    .dnetor-tabs-panel {
        padding: 20px;
    }
    .dnetor-tabs-list {
        margin: 0;
        padding: 0;
        list-style-type: none;
        position: relative;
        display: inline-flex;
        width: fit-content;
        @include d-flex();

        .dnetor-tabs-nav-item {
            @include d-flex();
            background-color: transparent;
            font: inherit;
            font-weight: 500;
            cursor: pointer;
            text-align: center;
            padding: 1em 1.5em;
            align-items: center;
            @include transition(all .3s);
        }
    }

    &.dnetor-tabs-default {
        .dnetor-tabs-nav-item {
            border: 1px solid #eee;
            &:hover,
            &.dnetor-tabs-active{
                background-color: $accent_color;
                border-color: $accent_color;
                .dnetor-tabs-nav-title{
                    color: #fff;
                }
            }
        }
    }

    &.dnetor-tabs-underline {
        .dnetor-tabs-list {
            border-bottom: var(--tab_border_width) solid #eee;
            &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: calc(var(--start_of_pos) - var(--tab_border_width));
                height: var(--tab_underline_border_width);
                scale: var(--_tab_width, 0.1) 1;
                translate: var(--_tab_left, 0) 0;
                transform-origin: left;
                @include transform-origin(left);
                transition: scale 200ms, translate 200ms;
                background: #306aff;
            }
        }
    }

    &.dnetor-tabs-type_3 {
        .dnetor-tabs-list {
            width: 100%;
            @include d-flex();
            @include justify-content-between();
            border-bottom: 1px solid #eee;

            .dnetor-tabs-nav-item {
                .dnetor-tabs-nav-title {
                    text-align: center !important;
                }
            }
        }
    }

    &.dnetor-tabs-type_4 {
        .dnetor-tabs-header {
            @include justify-content-center();
        }

        .dnetor-tabs-list {
            width: 80%;
            border-bottom: var(--tab_border_width) solid #eee;
            border-top: var(--tab_border_width) solid #eee;
            @include justify-content-center();
        }

        .dnetor-tabs-nav-item {
            padding: 25px;
            border: unset !important;
        }

        .border-image {
            @include d-flex();
            @include align-items-center();
            img {
                width: 15px;
            }
        }
    }
}

@media (max-width: 767px) {
    .dnetor-tabs{
        .dnetor-tabs-list{
            overflow-x: auto;
            overflow-y: hidden;
        }
        &.dnetor-tabs-type_4 {
            .dnetor-tabs-list {
                width: 100%;
            }
        }
    }
}