@import "dxHelpers/reset";
@import "dxHelpers/text";

:host {
    display: block;
}

.container {
    --error-color: var(--dx-g-red-vibrant-50);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.checkbox-label,
input {
    cursor: pointer;
}

label {
    display: var(--dx-c-checkbox-display, flex);
    align-items: var(--dx-c-checkbox-align-label, flex-start);
}

input {
    flex-shrink: 0;
    margin: 0;
}

.checkbox-label {
    line-height: var(--dx-c-checkbox-text-line-height, 20px);
    font-size: var(--dx-c-checkbox-font-size, --dx-g-text-base);
    transform: translateY(-2px);
    padding-left: 12px;
}

.checkbox-label::first-letter {
    text-transform: uppercase;
}

.checkbox-error {
    opacity: 0;
    display: none;
    margin-top: var(--dx-g-spacing-xs);
    user-select: none;
}

input:disabled {
    cursor: not-allowed;
    opacity: 0.9;
}

input:disabled + .checkbox-label {
    cursor: not-allowed;
    color: var(--sds-g-gray-9);
}

.container.show-error .checkbox-error {
    opacity: 1;
    display: block;
    user-select: auto;
}

/* adapted from https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/ */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    input {
        --active-color: var(--dx-g-blue-vibrant-50);
        --active-inner-color: #fff;
        --focus-shadow: 1px var(--dx-g-blue-vibrant-80);
        --border-color: var(--sds-g-gray-5);
        --border-color-hover: var(--sds-g-gray-6);
        --background: #fff;
        --disabled-color: var(--sds-g-gray-4);
        --disabled-inner-color: var(--dx-g-gray-60);
        --size: var(--dx-g-spacing-md);

        appearance: none;
        height: var(--size);
        width: var(--size);
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        cursor: pointer;
        border: 1px solid var(--border-color-override, var(--border-color));
        background: var(--background-override, var(--background));
        transition: var(--dx-g-transition-box-shadow-1x),
            var(--dx-g-transition-hue-1x);
    }

    input::after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        opacity: var(--opacity, 0);
        transition: transform var(--transition-duration-transform, 0.3s)
                var(--transition-easing-transorm, ease),
            opacity var(--transition-duration-opacity, 0.2s);
    }

    input[type="checkbox"] {
        border-radius: 2px;
    }

    input[type="radio"] {
        border-radius: 50%;
    }

    input:disabled {
        --background-override: var(--disabled-color);
    }

    input:focus {
        box-shadow: 0 0 0 var(--focus-shadow);
    }

    input:checked {
        --opacity: 1;
        --transition-duration-opacity: 0.3s;
        --transition-duration-transform: 0.6s;
        --transition-easing-transorm: cubic-bezier(0.2, 0.85, 0.32, 1.2);
    }

    input:disabled:checked {
        --border-color-override: var(--border-color);
    }

    input:hover:not(:disabled) {
        --border-color-override: var(--border-color-hover);
    }

    input[type="checkbox"]::after {
        --checkbox-width: 4px;
        --checkbox-height: 8px;

        width: var(--checkbox-width);
        height: var(--checkbox-height);
        border: 2px solid var(--active-color);
        border-top: 0;
        border-left: 0;
        left: calc(50% - var(--checkbox-width) / 2);
        top: calc(50% - var(--checkbox-height) / 2);
        transform: rotate(var(--checkbox-rotation, 20deg));
    }

    input[type="checkbox"]:checked {
        --checkbox-rotation: 43deg;
    }

    input[type="radio"]::after {
        --opacity: 0;

        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--active-color);
        margin: 3px;
        transition: var(--dx-g-transition-hue-1x);
    }

    input:checked[type="radio"]::after {
        --opacity: 1;
    }

    .container.show-error input {
        --border-color-override: var(--error-color) !important;

        box-shadow: 0 0 0 1px var(--error-color) !important;
    }
}