:root {
    --nb-tab-7-width: 50px;
    --nb-tab-7-height: 50px;
    --nb-tab-7-spacer-x: var(--nb-spacer-x);
    --nb-tab-7-inactive-opacity: 0.6;
    --nb-tab-7-hover-opacity: 1;
    --nb-tab-7-link-color: var(--nb-text-link-1-secondary-color);
    --nb-tab-7-image-bottom-border-color: var(--nb-tab-7-link-color);
    --nb-tab-7-image-bottom-border-width: var(--nb-border-width-xs);
}

.nb-component.nb-tab-7 {
    display: flex;
    align-items: center;
    width: max-content;
    gap: calc(var(--nb-tab-7-spacer-x)/2);
    opacity: var(--nb-tab-7-inactive-opacity);
}

.nb-tab-7 .text-link-1.nb-link:hover,
.nb-tab-7 .text-link-1.nb-link{
    color: var(--nb-tab-7-link-color);
}

.nb-tab-7.active,
.nb-tab-7:hover {
    opacity: var(--nb-tab-7-hover-opacity);
}

.nb-tab-7:hover .nb-img,
.nb-tab-7.active .nb-img {
    border-bottom: var(--nb-tab-7-image-bottom-border-width) var(--nb-border-style) var(--nb-tab-7-image-bottom-border-color);
}

.nb-tab-7 .nb-img {
    max-width: var(--nb-tab-7-width);
    max-height: var(--nb-tab-7-height);
    padding-bottom: 5px;
    border-bottom: var(--nb-tab-7-image-bottom-border-width) var(--nb-border-style) transparent;
}

@media (max-width: 425px) {
    .nb-tab-7 {
        width: 100%;
    }

    .nb-tab-7 .nb-link {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        display: -webkit-box;
        --nb-dt-rows: 2;
        -webkit-line-clamp: var(--nb-dt-rows);
        -webkit-box-orient: vertical;
    }
}