@import "./functions/func.scss";

.ui-check-image-wrapper {
    >input[type="checkbox"] {
        display: none;

        &:checked {
            ~.checked {
                display: inline;
            }

            ~.unchecked {
                display: none;
            }
        }
    }

    >.checked {
        display: none;
    }

    >.unchecked {
        display: inline;
    }
}

.ui-check-wrapper {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    height: 36px;
    @include ui-check();

    .ui-check-inner {
        flex: 0 0 auto;

        +* {
            flex: 1 1 auto;
            font-weight: 400;
            font-size: var(--font-size);
            padding-left: 8px;
            padding-right: 6px;
            align-self: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
            color: var(--color);
        }
    }
}

.ui-switch {
    line-height: 1rem;
    user-select: none;
    cursor: pointer;

    &.disabled {
        cursor: default;
    }

    >span:first-of-type {
        display: inline-flex;
        align-items: center;
        position: relative;

        &::before {
            content: '';
            width: 30px;
            min-width: 30px;
            max-width: 30px;
            height: 16px;
            margin-right: 4px;
            background-color: var(--switch-bg-color);
            border-radius: 8px;
            transition: background-color .08s ease;
        }

        &::after {
            content: '';
            position: absolute;
            left: 1px;
            top: calc(50% - 7px);
            width: 14px;
            height: 14px;
            background-color: white;
            border-radius: 7px;
            box-shadow: 1px 1px 8px rgb(0 0 0 / 20%);
            transition: left .08s ease;
        }
    }

    &.ui-switch-red>span:first-of-type::before {
        background-color: var(--red-color);
    }

    >input[type="checkbox"] {
        display: none;

        &:checked+span:first-of-type {

            &::before {
                background-color: var(--switch-active-bg-color);
            }

            &::after {
                left: 15px;
            }
        }

        &:disabled+span:first-of-type {
            cursor: default;

            &::before {
                opacity: .3;
            }
        }
    }
}

.ui-switch-group {
    line-height: 1rem;
    user-select: none;
    display: inline-flex;
    background-color: var(--switch-bg-color);
    border-radius: 10px;

    >label {

        >span {
            display: block;
            padding: 4px 10px;
            margin: 2px;
            border-radius: 8px;
            cursor: pointer;
        }
    }

    >label>input[type="radio"] {
        display: none;

        &:checked+span {
            background-color: white;
            box-shadow: 1px 1px 8px rgb(0 0 0 / 20%);
            transition: background-color .08s ease;
        }
    }
}