@-webkit-keyframes show-toggle-checked {
    0% {
        margin-left: calc(-100% - 8px);
    }

    100% {
        margin-left: calc(-1.5em - 8px);
    }
}

@keyframes show-toggle-checked {
    0% {
        margin-left: calc(-100% - 8px);
    }

    100% {
        margin-left: calc(-1.5em - 8px);
    }
}

@-webkit-keyframes show-toggle-unchecked {
    0% {
        margin-left: calc(100% + 8px);
    }

    100% {
        margin-left: calc(1.5em + 8px);
    }
}

@keyframes show-toggle-unchecked {
    0% {
        margin-left: calc(100% + 8px);
    }

    100% {
        margin-left: calc(1.5em + 8px);
    }
}

.control-container.toggle-button input[type="checkbox"],
.control-container.toggle-button input[type="radio"] {
    appearance: none;
    min-width: 3em;
    height: 1.5em;
    border-radius: 15px;
    background-color: var(--brand-gray-light);
    border: 4px solid var(--brand-gray-light);
    position: relative;
    transition: color 0.2s;
    box-sizing: content-box;
}

    .control-container.toggle-button input[type="checkbox"]:checked,
    .control-container.toggle-button input[type="radio"]:checked {
        background-color: var(--brand-primary-blue);
        border-color: var(--brand-primary-blue);
    }

    .control-container.toggle-button input[type="checkbox"]::before,
    .control-container.toggle-button input[type="radio"]::before {
        content: "";
        display: block;
        height: 100%;
        border-radius: 50%;
        aspect-ratio: 1 / 1;
        background-color: var(--background-color);
        position: absolute;
        left: 0;
        transition: left 0.2s;
        box-shadow: 0 2px 4px var(--brand-gray-dark);
    }

    .control-container.toggle-button input[type="checkbox"]:checked::before,
    .control-container.toggle-button input[type="radio"]:checked::before {
        left: calc(100% - 1.5em);
        box-shadow: none;
    }

    .control-container.toggle-button input[type="checkbox"]:hover,
    .control-container.toggle-button input[type="checkbox"]:focus-visible,
    .control-container.toggle-button input[type="radio"]:hover,
    .control-container.toggle-button input[type="radio"]:focus-visible,
    .control-container.toggle-button.error input[type="checkbox"]:hover,
    .control-container.toggle-button.error input[type="checkbox"]:focus-visible,
    .control-container.toggle-button.error input[type="radio"]:hover,
    .control-container.toggle-button.error input[type="radio"]:focus-visible {
        border-color: var(--brand-info-blue);
        background-color: var(--brand-info-blue);
        outline: var(--brand-info-blue);
    }

    .control-container.toggle-button input[type="checkbox"][data-label-checked][data-label-unchecked]::after,
    .control-container.toggle-button input[type="radio"][data-label-checked][data-label-unchecked]::after {
        content: attr(data-label-unchecked);
        font-size: var(--font-size);
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        position: absolute;
        color: var(--background-color);
        justify-content: flex-start;
        -webkit-animation: show-toggle-unchecked .2s forwards;
        animation: show-toggle-unchecked .2s forwards;
        margin-left: calc(1.5em + 8px);
    }

    .control-container.toggle-button input[type="checkbox"][data-label-checked][data-label-unchecked]:checked::after,
    .control-container.toggle-button input[type="radio"][data-label-checked][data-label-unchecked]:checked::after {
        content: attr(data-label-checked);
        font-size: var(--font-size);
        justify-content: flex-end;
        -webkit-animation: show-toggle-checked .2s forwards;
        animation: show-toggle-checked .2s forwards;
        margin-left: calc(-1.5em - 8px);
    }