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

.dnetor-tabs-horizontal {
    --tab_border_width: 1px;
    --start_of_pos: 0px;
    --tab_underline_border_width: 3px;
    --tab_border_color: #f1f1f1;
    margin: 50px auto;
    @include d-flex();

    .dnetor-tabs-list {
        padding: 0;
        list-style-type: none;
        position: relative;
        @include d-flex();
        @include flex-column();
    }

    .dnetor-tabs-nav-item {
        background: transparent;
        font-weight: 500;
        cursor: pointer;
        color: #666;
        padding: 24px;
        border: 1px solid #e9e9e9;
        @include flex-column();
        @include transition(all .3s);
        border-radius: 3px;
        .dnetor-tabs-title {
            width: 100%;
            @include d-flex();
            align-items: center;
        }

        &.text-align-left {
            text-align: left;
            .dnetor-tabs-title {
                @include justify-content-start();
            }
        }
        &.text-align-center {
            text-align: center;
            .dnetor-tabs-title {
                @include justify-content-center();
            }
        }
        &.text-align-right {
            text-align: right;
            .dnetor-tabs-title {
                @include justify-content-end();
            }
        }
    }

    .dnetor-icons{
        margin-right: 10px;
        svg path{
            fill: currentColor;
            stroke: currentColor;
        }
    }

    .dnetor-tabs-title-description{
        margin-top: 15px;
    }

    .dnetor-tabs-panel {
        padding: 20px;
        .dnetor-tab-image {
            width: 100%;
            height: 100%;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .dnetor-tabs-nav-item,
    .dnetor-tabs-title{
        @include d-flex();
    }

    .dnetor-tabs-active{
        color: #fff;
        background-color: $accent_color;
        border-color: $accent_color;
    }
}

@media (max-width: 767px) {
    .dnetor-tabs-horizontal{
        display: block;
    }
}