@import 'src/mixins/index';

.toggle {
    button {
        display: inline-flex;
        align-items: center;
        user-select: none;
        cursor: pointer;

        width: 66px;
        height: 32px;
        background-color: chaser-color('Light Neutral 2');
        border: 1px solid chaser-color('Mid Neutral 3');
        border-radius: 1rem;
        position: relative;
        transition: background-color 0.2s ease-in-out;

        &:after {
            content: '';
            display: block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: chaser-color('Dark Neutral 1');
            position: absolute;
            top: 0.20rem;
            left: 0.25rem;
            transition: transform 0.2s ease-in-out;
        }
    }

    &.on {
        button {
            &:after {
                transform: translateX(32px);
            }
        }
    }
}