/*
    Стиль для вкладок
*/

/* Style the tab */
.tab {
    overflow: hidden;
    margin-bottom: 1em;
    width: max-content;
    background-color: color-mix(in srgb, Canvas, GrayText);
    width: 100%;
    border-radius: var(--border-radius);
}

/* Style the buttons that are used to open the tab content */
.tablinks {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    color: ButtonText;
    border-radius: 0px;
}

/* Change background color of buttons on hover */
.tablinks:hover {
    background-color: color-mix(in hsl, color-mix(in srgb, Canvas, GrayText), SelectedItem);
    color: ButtonText
}

/* Create an active/current tablink class */
.tablinks.active {
    background-color: SelectedItem;
    color: SelectedItemText
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
}

.tabcontent {
    animation: fadeEffect 1s;
    /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}