.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0;

    span {
        font-size: var(--font-size);
        font-family: var(--base-font-family);
        max-width: 400px;

        @media (--xs-down) {
            max-width: 200px;
        }
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 36px;

        input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            opacity: 0;
            cursor: pointer;

            &:focus + .slider {
                outline: 2px solid var(--warm-grey);
                outline-offset: 2px;
            }
        }

        .slider {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--warm-grey);
            border-radius: 28px;
            transition: 0.4s;

            &::before {
                content: '';
                background-image: url('../../../ui/icons/close-black-light.svg');
                background-repeat: no-repeat;
                background-position: center;
                position: absolute;
                width: 30px;
                height: 30px;
                left: 3px;
                bottom: 3px;
                background-color: var(--white);
                border-radius: 50%;
                transition: 0.4s;
            }
        }

        input:checked + .slider {
            background-color: var(--valid-green);

            &::before {
                transform: translateX(24px);
                background-image: url('../../../ui/icons/checkmark-green.svg');
            }
        }
    }
}
