input[type='checkbox'].coveo-slide-toggle {
    display: none;

    & + button {
        position: relative;
        width: 32px;
        height: 20px;
        border: none;
        cursor: pointer;

        &::before,
        &::after {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            display: block;
            width: 32px;
            background-color: var(--deprecated-medium-grey);
            border-radius: 1em;
            transition: all 0.2s linear;
            content: ' ';
        }

        &::after {
            top: 2px;
            bottom: 2px;
            width: 18px;
            margin-left: 2px;
            background-color: var(--white);
        }
    }

    &:checked {
        + button::before {
            background-color: var(--deprecated-orange);
        }

        + button::after {
            margin-left: 12px;
        }
    }

    &:disabled + button {
        outline: none;
        cursor: default;
        opacity: 0.4;
    }
}

.coveo-slide-toggle-label {
    display: inline-flex;
    align-items: center;
    line-height: 20px;
    transition: opacity 0.35s ease;
    user-select: none;

    &.disabled,
    &[for].disabled {
        cursor: default;
        opacity: 0.4;
    }

    &.boxed {
        display: inline-block; // Required for the float button placement.
        padding: 8px 10px;
        border: solid 1px var(--deprecated-medium-grey);

        .toggle-description {
            display: block;
            margin-top: 8px;
            color: var(--deprecated-dark-grey);
            font-size: 13px;
            line-height: 16px;
        }

        button {
            float: right;
        }
    }

    .toggle-label {
        font-size: $title-font-size;
    }

    button + .toggle-label,
    .toggle-label + .coveo-slide-toggle + button {
        margin-left: $checkbox-label-margin;
    }
}

label[for].coveo-slide-toggle-label {
    cursor: pointer;
}