.switcher__container {
    pointer-events: all;
    position: relative;
    display: inline-flex;
    background: var(--switcher-bg, #000);
    border-radius: var(--button-primary-border-radius);
    padding: 2px 4px;
    gap: 4px;
    overflow: hidden;
    box-shadow: var(--switcher-shadow);
    opacity: 1;
    transition:
        box-shadow 0.3s ease,
        transform 0.5s ease-in-out,
        opacity 0.5s ease-in-out;
}

.switcher__item {
    padding: 10px 20px;
    cursor: pointer;
    user-select: none;
    transition: color 0.3s;
    z-index: 2;
    white-space: nowrap;
    position: relative;
    font-size: 0.9em;
    color: var(--switcher-item-text);
}
.switcher__item.active {
    color: var(--switcher-item--active-text);
}
.switcher__runner {
    position: absolute;
    top: 4px;
    bottom: 4px;
    background: var(--switcher-item--active-bg, #007bff);
    border-radius: var(--button-primary-border-radius);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

body.hasHover .switcher__container:hover {
    box-shadow: var(--switcher-shadow-hover);
}

.container-hidden {
    opacity: 0;
}