.tabs {
    display: flex;
    border-bottom: 1px solid var(--outline);
    margin-block-end: var(--block-space);
}

.tab {
    position: relative;
    padding: var(--inline-space) var(--block-space);
    color: var(--on-surface-variant);
    transition: color 0.2s;
    cursor: pointer;
    flex: 1;
    text-align: center;
}

[data-tabs-target="panel"]:not([hidden]) {
    display: flex;
    flex-direction: column;
    flex: 1;
}

[data-controller="tabs"] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tab::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transition: transform 0.2s;
}

.tab:hover {
    color: var(--on-surface);
}

.tab.active {
    color: var(--primary);
}

.tab.active::after {
    transform: scaleX(1);
}

[data-tabs-target="panel"][hidden] {
    display: none;
}