.matrix-v2-calculator-tabs {
    --matrix-v2-tabs-accent: var(--global-palette1, #156f8f);
    width: 100%;
    border: 1px solid var(--global-gray-400, #d4d4d8);
    border-radius: var(--global-card-border-radius, var(--global-border-radius, var(--global-button-border-radius, 4px)));
    padding: 16px;
    color: inherit;
    background: transparent;
    font: inherit;
}

.matrix-v2-calculator-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
}

.matrix-v2-calculator-tabs__tab {
    box-sizing: border-box;
    min-height: 40px;
    border: 1px solid var(--matrix-v2-tabs-accent);
    margin: 0;
    font: inherit;
    letter-spacing: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.matrix-v2-calculator-tabs .matrix-v2-calculator-tabs__tab:hover,
.matrix-v2-calculator-tabs .matrix-v2-calculator-tabs__tab:focus,
.matrix-v2-calculator-tabs .matrix-v2-calculator-tabs__tab:active {
    border: 1px solid var(--global-palette-btn-bg-hover, var(--matrix-v2-tabs-accent));
    background: var(--global-palette-btn-bg-hover, var(--matrix-v2-tabs-accent));
    color: var(--global-palette-btn-hover, #ffffff);
    box-shadow: 0 15px 25px -7px rgba(0, 0, 0, 0.1);
}

.matrix-v2-calculator-tabs .matrix-v2-calculator-tabs__tab[aria-selected="true"] {
    border-color: var(--global-palette-btn-bg, var(--matrix-v2-tabs-accent));
    background: var(--global-palette-btn-bg, var(--matrix-v2-tabs-accent));
    color: var(--global-palette-btn, #ffffff);
    box-shadow: 0 15px 25px -7px rgba(0, 0, 0, 0.1);
}

.matrix-v2-calculator-tabs .matrix-v2-calculator-tabs__tab[aria-selected="false"],
.matrix-v2-calculator-tabs .matrix-v2-calculator-tabs__tab[aria-selected="false"]:active {
    border: 1px solid var(--matrix-v2-tabs-accent);
    background: transparent;
    color: var(--matrix-v2-tabs-accent);
    box-shadow: none;
}

.matrix-v2-calculator-tabs .matrix-v2-calculator-tabs__tab[aria-selected="false"]:hover,
.matrix-v2-calculator-tabs .matrix-v2-calculator-tabs__tab[aria-selected="false"]:focus {
    border: 1px solid var(--global-palette-btn-bg-hover, var(--matrix-v2-tabs-accent));
    background: var(--global-palette-btn-bg-hover, var(--matrix-v2-tabs-accent));
    color: var(--global-palette-btn-hover, #ffffff);
    box-shadow: 0 15px 25px -7px rgba(0, 0, 0, 0.1);
}

.matrix-v2-calculator-tabs__tab:focus-visible {
    outline: 2px solid var(--global-palette1, currentColor);
    outline-offset: 2px;
}

.matrix-v2-calculator-tabs__panel[hidden] {
    display: none !important;
}

.matrix-v2-calculator-tabs__panel > .matrix-v2-calculator {
    margin-top: 0;
}

.matrix-v2-calculator-tabs--dark {
    --matrix-v2-tabs-accent: var(--matrix-v2-tabs-dark-accent, #16b8ed);
    border-color: var(--matrix-v2-tabs-dark-border, #33275c);
    padding: 24px;
    background-color: rgb(7, 8, 35);
    background-image: linear-gradient(135deg, rgb(7, 8, 35) 0%, rgb(155, 81, 224) 100%);
    color: var(--matrix-v2-tabs-dark-color, #ffffff);
}

.matrix-v2-calculator-tabs--dark .matrix-v2-calculator__rating,
.matrix-v2-calculator-tabs--dark .matrix-v2-calculator__rating-caption {
    color: inherit;
}

.matrix-v2-calculator-tabs--dark .matrix-v2-calculator-tabs__tab[aria-selected="true"] {
    border-color: var(--matrix-v2-tabs-accent);
    background: var(--matrix-v2-tabs-accent);
    color: #ffffff;
}

.matrix-v2-calculator-tabs--dark .matrix-v2-calculator-tabs__tab[aria-selected="false"],
.matrix-v2-calculator-tabs--dark .matrix-v2-calculator-tabs__tab[aria-selected="false"]:active {
    border-color: rgba(255, 255, 255, 0.82);
    background: transparent;
    color: #ffffff;
    box-shadow: none;
}

.matrix-v2-calculator-tabs--dark .matrix-v2-calculator-tabs__tab[aria-selected="false"]:hover,
.matrix-v2-calculator-tabs--dark .matrix-v2-calculator-tabs__tab[aria-selected="false"]:focus {
    border-color: var(--global-palette-btn-bg-hover, var(--matrix-v2-tabs-accent));
    background: var(--global-palette-btn-bg-hover, var(--matrix-v2-tabs-accent));
    color: var(--global-palette-btn-hover, #ffffff);
    box-shadow: 0 15px 25px -7px rgba(0, 0, 0, 0.18);
}

.matrix-v2-calculator-tabs__notice {
    border-left: 4px solid #dba617;
    padding: 10px 12px;
    background: #fff8dd;
    color: inherit;
}

@media (max-width: 520px) {
    .matrix-v2-calculator-tabs {
        padding: 12px;
    }

    .matrix-v2-calculator-tabs--dark {
        padding: 16px;
    }

    .matrix-v2-calculator-tabs__list {
        flex-direction: column;
        align-items: stretch;
    }

    .matrix-v2-calculator-tabs__tab {
        flex: 0 0 auto;
        width: 100%;
        white-space: nowrap;
    }
}