.tabs-header,
.tabs-body {
    display: flex;
    justify-content: start;
}

.tabs-header {
    border-bottom: 1px solid #333;
}

.tabs-header .tabs-item {
    padding: 8px 16px;
    background-color: rgb(0 0 0 / 5%);
    cursor: pointer;

    &:first-child {
        border-top-left-radius: 8px;
    }

    &:last-child {
        border-top-right-radius: 8px;
    }
}

.tabs-header .tabs-item:not(.tabs--active):hover {
    background-color: rgb(0 0 0 / 10%);
}

.tabs-header .tabs--active {
    background-color: rgb(0 0 0 / 10%);
    position: relative;

    &::after {
        content: "";
        width: 100%;
        height: 2px;
        background-color: var(--maincolor);
        position: absolute;
        bottom: 0;
        left: 0;
    }
}

.tabs-body {
    justify-content: stretch;
}

.tabs-body .tabs-item {
    flex: 1;
}

.tabs-body .tabs-item:not(.tabs--active) {
    display: none;
}

.tabs-body .tabs-item pre {
    margin: 0;
}

.tabs-body .tabs-item .highlight {
    width: 100%;
}

@media screen and (prefers-color-scheme: dark) {
    .tabs-header .tabs--active {
        background-color: rgb(0 0 0 / 40%);
    }
}