/* This file is used as dependency in:
   ../../modules/sec-text.module/module.html */


.pwr-sec-tabs {
    --tabs-default-radius: 4px;
    --tabs-round-radius: 28px;
    --tabs-wrapper-padding: 8px;
    --tabs-inner-padding: 15px;
    --tabs-boxed-bg-color: rgba(var(--clr-primary-rgb), .1);
}

.pwr-sec-tabs {
    padding: 140px 0 135px;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.pwr-sec-tabs .pwr-scroll-shadow__sensor {
    flex: 1;
    position: absolute; /* This takes it out of the flex layout */
}

.pwr-sec-tabs .pwr-tabs__header {
    margin-bottom: 0px;
    overflow-x: scroll;
}

.pwr-sec-tabs__intro-sec {
    position: relative;
}

.pwr-sec-tabs__title {
    margin: 0 0 55px;
}

.pwr-sec-tabs--right .pwr-sec-tabs__title {
    max-width: 390px;
}

.pwr-sec-tabs--right .pwr-sec-tabs__title-intro {
    max-width: 390px;
}

.pwr-sec-tabs__left {
    margin: 0;
}

.pwr-sec-tabs__right {
    margin: 0;
}

.pwr-sec-tabs__right {
    float: left;
}

.pwr-sec-tabs--right .pwr-sec-tabs__left {
    display: none;
}

.pwr-sec-tabs--right .pwr-sec-tabs__intro-sec {
    margin-right: 40px;
}

.pwr-sec-tabs--right .pwr-sec-tabs__intro-sec {
    float: left;
}

.pwr-sec-tabs--right .pwr-sec-tabs__content {
    float: left;
}

.pwr-sec-tabs--right .pwr-sec-tabs__intro-sec {
    width: calc( 40% - 20px );
}

.pwr-sec-tabs--right .pwr-sec-tabs__content {
    width: calc( 60% - 20px );
}

@media (min-width: 768px) {

    .pwr-sec-tabs--right .pwr-sec-tabs__title {
        margin: 0;
    }

}

@media (max-width: 767px) {
    .pwr-sec-tabs {
        padding: calc(130px * var(--sp-reduction-factor)) 0;
    }

    .pwr-sec-tabs--right .pwr-sec-tabs__title {
        max-width: 100%;
    }

    .pwr-sec-tabs--right .pwr-sec-tabs__title-intro {
        max-width: 100%;
    }

    .pwr-sec-tabs__title-intro--mobile-hidden {
        display: none;
    }

    .pwr-sec-tabs__title {
        margin-bottom: 30px;
    }

    .pwr-sec-tabs--right .pwr-sec-tabs__intro-sec {
        margin: 0;
        width: 100%;
    }

    .pwr-sec-tabs--right .pwr-sec-tabs__content {
        margin: 0;
        width: 100%;
    }

    .pwr-sec-tabs__left + .pwr-sec-tabs__right {
        margin-top: 1em;
    }

    .pwr-sec-tabs {
        padding: calc(140px * var(--sp-reduction-factor)) 0 calc(135px * var(--sp-reduction-factor));
    }
}



/* Tab Styles General */

.pwr-sec-tabs .pwr-tabs__item {
    cursor: pointer;
    display: inline-block;
}

.pwr-sec-tabs .pwr-tabs__item:hover {
    color: var(--clr-primary);
    opacity: 1;
}

.pwr-sec-tabs .pwr-tabs__item--active {
    color: var(--clr-primary);
    fill: var(--clr-primary);
    font-weight: 700;
}

.pwr-sec-tabs .pwr-tabs__item--active:hover {
    color: var(--clr-primary);
    font-weight: 700;
}


.pwr-sec-tabs .pwr-tabs__item-description,
.pwr-sec-tabs .pwr-tabs__item--active .pwr-tabs__item-description {
    font-weight: var(--fw-base);
    font-size: 14px;
}
.pwr-sec-tabs .pwr-tabs__item-icon-wrapper {
    display: inline-block;
}

.pwr-sec-tabs .pwr-tabs__item-title{
    font-weight: 700;
}


.pwr-sec-tabs.pwr-tabs__header {
    overflow-x: scroll;
}


.pwr-sec-tabs .pwr-tabs__item-wrapper {
    display: inline-flex;
    width:100%
}

.pwr-sec-tabs .pwr-tabs__equal-width .pwr-tabs__item {
    flex: 1;
    
}


/* Layout */

.pwr-sec-tabs .pwr-tabs__item {
    min-width: 200px;
    /*max-width: 200px;*/
    padding: var(--tabs-inner-padding);
}

.pwr-sec-tabs .pwr-tabs__item:hover {
    fill: var(--clr-primary);
}

.pwr-sec-tabs .pwr-tabs__content-wrapper {
    display: flex;
    gap: 12px;
    width: 100%;

}


.pwr-sec-tabs .pwr-tabs__align-center .pwr-tabs__item-wrapper {
    justify-content: center;
}

.pwr-sec-tabs .pwr-tabs__icon-position-top .pwr-tabs__content-wrapper {
    flex-direction: column;
}

.pwr-sec-tabs .pwr-tabs__icon-position-left .pwr-tabs__content-wrapper {
    flex-direction: row;
}

.pwr-sec-tabs .pwr-tabs__icon-position-right .pwr-tabs__content-wrapper {
    flex-direction: row-reverse;
}


.pwr-sec-tabs .pwr-tabs__layout-left .pwr-tabs__item-text-wrapper {
    text-align: left;
}
.pwr-sec-tabs .pwr-tabs__layout-left .pwr-tabs__content-wrapper {
    justify-content: left;

}
.pwr-sec-tabs .pwr-tabs__layout-left .pwr-tabs__item {
    justify-content: left;
}

.pwr-sec-tabs .pwr-tabs__layout-right .pwr-tabs__item-text-wrapper {
    text-align: right;
}
.pwr-sec-tabs .pwr-tabs__layout-right .pwr-tabs__content-wrapper {
    justify-content: right;
}
.pwr-sec-tabs .pwr-tabs__layout-right .pwr-tabs__item {
    justify-content: right;
}


.pwr-sec-tabs .pwr-tabs__layout-center .pwr-tabs__item-text-wrapper {
    text-align: center;
}
.pwr-sec-tabs .pwr-tabs__layout-center .pwr-tabs__content-wrapper {
    justify-content: center;
}
.pwr-sec-tabs .pwr-tabs__layout-center .pwr-tabs__item {
    justify-content: center;
}


.pwr-sec-tabs .pwr-tabs__layout-left .pwr-tabs__item-icon {
    justify-content: flex-start;
}


.pwr-sec-tabs .pwr-tabs__layout-right .pwr-tabs__item-icon {
    justify-content: flex-end;
}


@media (max-width: 575px ) {
    .pwr-tabs__item-wrapper {
        display: none !important;
    }
}


.pwr-tabs__item-icon {
    display: flex;
    justify-content: center;
    align-items: center;    
}


/* Underline */
.pwr-tabs__style-underline .pwr-tabs__item-wrapper {
    margin: 0 !important;
}
.pwr-tabs__style-underline .pwr-tabs__item{
    border-bottom-width: 2px;
    border-bottom-style: solid ;
    border-bottom-color: rgba(var(--clr-primary-rgb), 0);
}
.pwr-tabs__style-underline .pwr-tabs__item--active {
    border-bottom-color: var(--clr-primary);
}

.pwr-tabs__style-underline .pwr-tabs__item:not(.pwr-tabs__item--active) {
    border-bottom-color: rgba(var(--clr-base-dk-rgb)), .1);
}

.pwr-tabs__style-underline .pwr--dark .pwr-tabs__item:not(.pwr-tabs__item--active) {
    border-bottom-color: rgba(var(--clr-base-lt-rgb), .1);
}


@media (min-width: 992px ) {
    .pwr-tabs__item-wrapper::after {
        background-color: rgba(var(--clr-primary-rgb), .1);
        bottom: 0;
        content: '';
        height: 2px;
        left: 0;
        position: absolute;
        width: 100%;
    }

    .pwr--dark .pwr-tabs__item-wrapper::after {
        background-color: rgba(var(--clr-base-lt-rgb), .1);
    }
}


/* Minimal */

.pwr-tabs__style-minimal .pwr-tabs__item,
.pwr-tabs__style-minimal .pwr-tabs__item--active,
.pwr-tabs__style-minimal .pwr-tabs__item--active:hover {
    border: none;
}

.pwr-tabs__style-minimal .pwr-tabs__item-wrapper:after {
    display: none;
}


/* Boxed */
.pwr-tabs__style-boxed .pwr-tabs__item-wrapper {
    display: inline-flex;
    border-radius: calc(var(--tabs-default-radius) + var(--tabs-wrapper-padding));
    padding: var(--tabs-wrapper-padding);
    background-color: var(--tabs-boxed-bg-color);

}
.pwr-tabs__style-boxed .pwr-tabs__item,
.pwr-tabs__style-boxed .pwr-tabs__item--active,
.pwr-tabs__style-boxed .pwr-tabs__item--active:hover {
    border: none !important;
}
.pwr-tabs__style-boxed .pwr-tabs__item--active{
    border-radius: var(--tabs-default-radius);
    background-color: var(--clr-base-lt);
}
.pwr-tabs__style-boxed .pwr-tabs__item-wrapper:after {
    display: none;
}

.pwr--dark .pwr-tabs__style-boxed .pwr-tabs__item--active{
    background-color: var(--clr-base-dk);
    color: var(--clr-text-dk);
}
.pwr--dark .pwr-tabs__style-boxed .pwr-tabs__item-wrapper {
    background-color: rgba(var(--clr-primary-rgb), .4);
}

/* Boxed */
.pwr-tabs__style-boxed.pwr-tabs__style-round .pwr-tabs__item-wrapper  {
    border-radius: var(--tabs-round-radius);
}
.pwr-tabs__style-boxed.pwr-tabs__style-round .pwr-tabs__item--active{
    border-radius: calc(var(--tabs-round-radius) - var(--tabs-wrapper-padding));
}


/* Buttons */
.pwr-tabs__style-buttons .pwr-tabs__item-wrapper {
    display: inline-flex;
    gap: 8px;
    width: 100%;
    border-radius: var(--tabs-default-radius);
    padding: 8px 0px;
}
.pwr-tabs__style-buttons .pwr-tabs__item {
    border: none;
    background-color: rgba(var(--clr-btn-lt), .1);
}
.pwr-tabs__style-buttons .pwr-tabs__item,
.pwr-tabs__style-buttons .pwr-tabs__item--active,
.pwr-tabs__style-buttons .pwr-tabs__item--active:hover {
    border: none !important;
}

.pwr-tabs__style-buttons .pwr-tabs__item--active,
.pwr-tabs__style-buttons .pwr-tabs__item--active:hover{
    border-radius: var(--tabs-default-radius);
    background-color: rgba(var(--clr-primary-rgb), 1);
    color: white;
}
.pwr-tabs__style-buttons .pwr-tabs__item--active .pwr-tabs__item-icon-no-bg,
.pwr-tabs__style-buttons .pwr-tabs__item--active:hover .pwr-tabs__item-icon-no-bg {
    fill: white;
}


.pwr-tabs__style-buttons .pwr-tabs__item {
    display: flex;
}

.pwr-tabs__style-buttons .pwr-tabs__item-wrapper:after {
    display: none;
}

/* Buttons Round */
.pwr-tabs__style-buttons.pwr-tabs__style-round .pwr-tabs__item-wrapper {
    border-radius: var(--tabs-round-radius);
}
.pwr-tabs__style-buttons.pwr-tabs__style-round .pwr-tabs__item{
    border-radius: var(--tabs-round-radius);
}
.pwr-tabs__style-buttons.pwr-tabs__style-round .pwr-tabs__item--active{
    border-radius: var(--tabs-round-radius);
}


/* Tabs */
.pwr-tabs__style-tabs .pwr-tabs__item-wrapper {
    display: inline-flex;
    gap: 8px;
    padding: 0px;
    width: 100%;
}
.pwr-tabs__style-tabs .pwr-tabs__item {
    border: none;
}


.pwr-tabs__style-tabs .pwr-tabs__item--active,
.pwr-tabs__style-tabs .pwr-tabs__item--active:hover {
    border: none !important;
    border-radius: 4px 4px 0 0;
    background-color: rgba(var(--clr-primary-rgb), 1);
    color: white;
}
.pwr-tabs__style-tabs .pwr-tabs__item--active .pwr-tabs__item-icon-no-bg,
.pwr-tabs__style-tabs .pwr-tabs__item--active:hover .pwr-tabs__item-icon-no-bg {
    fill: white;
}


.pwr-tabs__style-tabs .pwr-tabs__item {
    display: flex;
}

.pwr-tabs__style-tabs.pwr-tabs__style-round .pwr-tabs__item-wrapper {
    border-radius: unset !important;
}

/* Buttons Round */
.pwr-tabs__style-tabs.pwr-tabs__style-round .pwr-tabs__item-wrapper {
    border-radius: var(--tabs-round-radius);
}
.pwr-tabs__style-tabs.pwr-tabs__style-round .pwr-tabs__item{
    border-radius: var(--tabs-round-radius) var(--tabs-round-radius) 0 0;
}
.pwr-tabs__style-tabs.pwr-tabs__style-round .pwr-tabs__item--active{
    border-radius: var(--tabs-round-radius) var(--tabs-round-radius) 0 0;
}