@import '../../css/variables';
@import '../../css/mixins';
@import '../../css/icons';
@import 'css/variables';
@import 'css/colors';
@import 'css/sizes';

.checkbox {
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
    outline: none;
    cursor: pointer;
    margin-right: var(--margin-right);

    &:last-child {
        margin-right: 0;
    }

    &.-disabled {
        cursor: default;

        .checkbox-label {
            &::before,
            &::after {
                cursor: default;
            }
        }
    }

    input {
        top: 0;
        left: 0;
        position: absolute;
        z-index: 0; // Put the input behind the label so it doesn't overlay text
        opacity: 0;
        height: 0;
        width: 0;
        outline: 0;

        &:checked ~ .checkbox-label,
        &[type="checkbox"]:indeterminate ~ .checkbox-label {
            &::before {
                ----border-color: var(----border-color--checked);
                ----background: var(----background--checked);
            }

            &::after {
                content: '';
                mask-position: center center;
                mask-repeat: no-repeat;
                transform: scale(1);
            }
        }

        &:disabled,
        &[readonly] {
            ~ .checkbox-label {
                ----label--color: var(----label--color--disabled);
            }

            &:checked ~ .checkbox-label {
                &::before {
                    ----border-color: var(----border-color--checked-disabled);
                    ----background: var(----background--checked-disabled);
                }

                &::after {
                    ----background: var(----color--disabled);
                }
            }
        }

        &:indeterminate ~ .checkbox-label::after {
            mask-image: url($ink-minus);
        }

        &:focus,
        &:active {
            outline: none;
        }
    }

    .checkbox-label {
        margin-bottom: 0;
        display: inline-flex;
        align-items: center;
        position: relative;
        transition-property: color;
        transition-duration: var(--transition-duration);
        transition-timing-function: var(--transition-easing);
        color: var(----label--color);
        font-size: var(----label--font-size);

        &::before,
        &::after {
            width: var(----size);
            height: var(----size);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        &::before {
            content: "";
            user-select: none;
            border-width: var(----border-width);
            border-style: var(----border-style);
            border-color: var(----border-color);
            border-radius: var(----border-radius);
            box-shadow: var(----box-shadow);
            margin-right: var(----margin-right);
            transition-property: background-color, border-color;
            transition-duration: var(--transition-duration);
            transition-timing-function: var(--transition-easing);
            background-color: var(----background);
        }

        &::after {
            mask-image: url($ink-check);
            position: absolute;
            top: 50%;
            left: 0;
            z-index: 1;
            text-align: center;
            transition-property: transform;
            transition-duration: var(--transition-duration);
            transition-timing-function: var(--transition-easing);
            transform: scale(0);
            background-color: var(----color);
            margin-top: calc(var(----size) / -2);
            mask-size: var(----checkmark--size) var(----checkmark--size);
        }
    }

    &.-native {
        input {
            top: auto;
            left: auto;
            position: relative;
            opacity: 1;
            height: auto;
            width: auto;
            margin-right: var(----margin-right);
        }

        .checkbox-label {
            &::after,
            &::before {
                display: none;
            }
        }
    }
}