@import '../../styles/constants';

$switch-transition: all 0.15s ease-in-out;

.EnableToolModule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 160px;
    height: 100%;

    span {
        color: $primary-color-white;
        font-size: 16px;
        font-family: $font-stack;
    }

    input {
        position: absolute;

        margin-left: -9999px;

        visibility: hidden;

        &:checked {
            & + label {
                background-color: $primary-color-teal;

                &::after {
                    margin-left: 32px;

                    background-color: $primary-color-teal;
                }
            }
        }
    }

    label {
        position: relative;

        display: block;
        width: 60px;
        height: 28px;
        padding: 2px;

        background-color: $color-gray;
        border-radius: 28px;
        outline: none;
        cursor: pointer;

        transition: $switch-transition;

        user-select: none;

        &::before {
            position: absolute;
            top: 2px;
            right: 2px;
            bottom: 2px;
            left: 2px;

            display: block;

            background-color: $primary-color-white;
            border-radius: 28px;

            transition: $switch-transition;

            content: '';
        }

        &::after {
            position: absolute;
            top: 4px;
            bottom: 4px;
            left: 4px;

            display: block;
            width: 24px;

            background-color: $color-gray;
            border-radius: 50%;

            transition: $switch-transition;

            content: '';
        }
    }
}