.ez-tabs {
    background-color: $ibexa-white;
    border-bottom: calculateRem(1px) solid $ibexa-color-base;
    border-top-left-radius: $ibexa-border-radius;
    border-top-right-radius: $ibexa-border-radius;

    .nav-item {
        position: relative;
        margin-bottom: calculateRem(-1px);
    }

    .nav-link {
        margin-left: calculateRem(16px);
        padding: calculateRem(14px) calculateRem(8px);
        color: $ibexa-black;
        border-radius: 0;
        text-decoration: none;

        &:hover {
            @include nav-item-active-hover;
            color: $ibexa-color-primary;
        }

        &.active {
            @include nav-item-active-hover;
            color: $ibexa-black;
        }
    }

    &__tab {
        &--hidden {
            display: none;
        }

        &--more {
            cursor: pointer;

            > .nav-link {
                position: relative;
                height: 100%;
                padding-right: calculateRem(32px);

                &:before,
                &:after {
                    content: '';
                    height: calculateRem(10px);
                    width: calculateRem(2px);
                    position: absolute;
                    top: 50%;
                    right: calculateRem(12px);
                    background-color: $ibexa-black;
                }

                &:before {
                    transform: translate(#{calculateRem(3px)}, -50%) rotate(-135deg);
                }

                &:after {
                    transform: translate(#{calculateRem(-3px)}, -50%) rotate(135deg);
                }
            }
        }

        &--expanded {
            .nav-link {
                background-color: $ibexa-white;
                border-color: $ibexa-white;
                color: $ibexa-black;
            }
        }

        &--highlighted {
            .nav-link {
                background-color: $ibexa-color-base-pale;
                border-color: $ibexa-color-base-pale;
                color: $ibexa-black;
            }
        }
    }

    &--hidden {
        display: none;
    }

    &--secondary {
        flex-direction: column;
        position: absolute;
        z-index: 100;

        &.nav-tabs {
            box-shadow: 0 calculateRem(6px) calculateRem(16px) 0 rgba(51, 51, 51, 0.3);

            .nav-link {
                border-radius: 0;
                border: 0;
                margin: calculateRem(2px) calculateRem(10px);

                &.active {
                    background-color: $ibexa-color-base-light;
                }

                &:hover {
                    background-color: $ibexa-white;
                }
            }
        }
    }

    &--menu-second-level {
        width: 100%;
        border: none;

        .nav-link {
            margin-left: 0;
        }
    }
}

.ez-tab-content {
    &__pane {
        padding: calculateRem(16px);
        background: $ibexa-white;
    }
}
