@use "../../core";
@use "../../core/size";
@use "../../core/mixins/focus" as *;
@use "variables" as *;

$checkbox_label_offset: 0.1rem;

%checkbox-icon {
    mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImNoZWNrYm94LWljb24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHJlY3QgeD0iMy40NzQiIHk9IjkuMTk0IiBmaWxsPSIjM0M1NTkyIiB3aWR0aD0iMCIgaGVpZ2h0PSIwIi8+CjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTguMzc2LDE1LjAwNWMtMC40MTYsMC0wLjgzMi0wLjE1OC0xLjE0OS0wLjQ3NWwtMy4yNS0zLjI0M2MtMC42MzUtMC42MzQtMC42MzUtMS42NiwwLTIuMjkzCiAgICAgICAgYzAuNjM1LTAuNjMzLDEuNjYzLTAuNjMzLDIuMjk4LDBsMi4xMDEsMi4wOTdsNS4zNTEtNS4zNGMwLjYzNS0wLjYzNCwxLjY2My0wLjYzNCwyLjI5OCwwYzAuNjM1LDAuNjMzLDAuNjM1LDEuNjU5LDAsMi4yOTMKICAgICAgICBsLTYuNSw2LjQ4N0M5LjIwNywxNC44NDcsOC43OTIsMTUuMDA1LDguMzc2LDE1LjAwNXoiLz4KPC9zdmc+Cg==");
    mask-repeat: no-repeat;
}

.checkbox {
    min-height: var(--f-height-medium);
    margin-bottom: core.densify(size.$margin-100);
    display: flex;

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

    &__input {
        appearance: none;
        outline: none;
        border: none;
    }

    &__label {
        // Set min-width to avoid being too small when little or no text is used.
        min-width: 4.5rem;
        display: inline-block;
        cursor: pointer;
        font-size: var(--f-font-size-standard);
        line-height: var(--f-line-height-small);
        padding-left: size.$padding-175;
        padding-top: $checkbox_label_offset;
        padding-bottom: $checkbox_label_offset;
        position: relative;
        color: $checkbox-color-text-default;

        // Safari: required to make label clickable
        * {
            pointer-events: none;
        }

        &::before,
        &::after {
            content: "";
            height: var(--f-icon-size-medium);
            left: 0;
            margin: $checkbox_label_offset 0;
            position: absolute;
            top: 0;
            width: var(--f-icon-size-medium);
        }

        &::before {
            background-color: $checkbox-color-background-default;
            border: var(--f-border-width-medium) solid $checkbox-color-border-default;
            border-radius: var(--f-border-radius-small);
            cursor: pointer;
            display: block;
            transition:
                background-color ease var(--f-animation-duration-medium),
                border-color ease var(--f-animation-duration-medium),
                opacity ease var(--f-animation-duration-medium);
        }

        &::after {
            @extend %checkbox-icon;

            background-color: $checkbox-icon-color-content;
            opacity: 0;
            transition: opacity ease var(--f-animation-duration-medium);
            @media (forced-colors: active) {
                background-color: Canvas;
            }
        }
    }

    &.disabled {
        color: $checkbox-color-text-disabled;
        @media (forced-colors: active) {
            color: GrayText;
        }

        .checkbox__label {
            color: $checkbox-color-text-disabled;
            cursor: default;

            &::before {
                background-color: $checkbox-color-background-disabled;
                border: var(--f-border-width-medium) solid $checkbox-color-border-disabled;
                cursor: inherit;
            }
        }

        input[type="checkbox"]:checked + label::before {
            background-color: $checkbox-color-background-disabled;
            border: var(--f-border-width-medium) solid $checkbox-color-border-disabled;
            @media (forced-colors: active) {
                border-color: GrayText;
            }
        }

        input[type="checkbox"]:checked + .checkbox__label::after {
            background-color: $checkbox-icon-color-content-disabled;
        }
    }

    input[type="checkbox"]:checked + label::before {
        background-color: $checkbox-color-background-selected;
        border: var(--f-border-width-medium) solid $checkbox-color-border-selected;
        @media (forced-colors: active) {
            background-color: HighLight;
            border-color: HighLight;
        }
    }

    input[type="checkbox"]:checked + .checkbox__label::after {
        opacity: 1;
    }

    input[type="checkbox"]:focus-visible + .checkbox__label {
        @include focus-indicator;
    }
}