@use '@justeattakeaway/pie-css/scss' as p;

:host {
    display: block;
    width: fit-content;
}

:host([labelFit='fill']) {
    width: 100%;
}

@keyframes checkboxCheck {
    0% {
        width: 0;
        height: 0;
        border-color: #fff;
        transform: translate3d(0, 0, 0) rotate(45deg);
    }

    33% {
        width: 8px;
        height: 0;
        transform: translate3d(0, 0, 0) rotate(45deg);
    }

    100% {
        width: 8px;
        height: 16px;
        border-color: #fff;
        border-bottom-right-radius: 2px;

        // had to add 1px to z-axis to fix a bug in Safari
        // that adds a tiny line between check borders
        transform: translate3d(0, -16px, 1px) rotate(45deg);
    }
}

@keyframes scaleDown {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes scaleUp {
    0% {
        transform: scale(0);
    }

    33% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1);
    }
}

.c-checkbox-tick {
    content: "";
    display: flex;
    flex: 0 0 auto;
    width: var(--checkbox-width);
    height: var(--checkbox-height);
    margin: var(--checkbox-margin);
    border: 1px solid var(--checkbox-border-color);
    border-radius: var(--checkbox-radius);
    background-color: var(--checkbox-bg-color);

    @media (prefers-reduced-motion: no-preference) {
        transition:
            background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),
            border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);
    }

    &.is-animated {
        @media (prefers-reduced-motion: no-preference) {
            animation: scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing);
        }
    }

    &.is-disabled {
        --checkbox-bg-color: var(--dt-color-container-strong);
        --checkbox-border-color: var(--dt-color-disabled-01);
    }

    &.c-checkbox-tick--status-error {
        --checkbox-border-color: var(--dt-color-support-error);
    }

    &.is-animated.is-checked {
        @media (prefers-reduced-motion: no-preference) {
            animation: scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing);
        }
    }

    &.is-checked {
        &:not(.is-disabled) {
            --checkbox-bg-color: var(--dt-color-interactive-brand);
            --checkbox-border-color: var(--checkbox-bg-color);
        }

        &.c-checkbox-tick--status-error {
            --checkbox-bg-color: var(--dt-color-support-error);
            --checkbox-border-color: var(--checkbox-bg-color);
        }
    }

    &.is-checked:before {
        content: "";
        position: relative;
        top: 55%;
        left: 14%;
        border-right: 2px solid transparent;
        border-bottom: 2px solid transparent;
        transform: rotate(45deg);
        transform-origin: 0% 100%;

        @media (prefers-reduced-motion: reduce) {
            animation-duration: 1ms !important;
            animation-delay: 0 !important;
            animation-iteration-count: 1 !important;
            width: 8px;
            height: 16px;
            border-color: #fff;
            border-bottom-right-radius: 2px;
            transform: translate3d(0, -16px, 0) rotate(45deg);
        }

        @media only percy {
            animation: none;
            width: 8px;
            height: 16px;
            border-color: #fff;
            border-bottom-right-radius: 2px;
            transform: translate3d(0, -16px, 0) rotate(45deg);
        }
    }


    &.is-checked.is-animated:before {
        animation: checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards;
    }

    &.is-checked:not(.is-animated):before {
        width: 8px;
        height: 16px;
        border-color: #fff;
        border-bottom-right-radius: 2px;
        transform: translate3d(0, -16px, 0) rotate(45deg);
    }


    &.is-checked:dir(rtl):before {
        left: unset;
        right: 50%;
    }

    &.is-indeterminate {
        &:not(.is-disabled) {
            --checkbox-bg-color: var(--dt-color-interactive-brand);
            --checkbox-border-color: var(--checkbox-bg-color);
        }

        &.c-checkbox-tick--status-error {
            --checkbox-bg-color: var(--dt-color-support-error);
            --checkbox-border-color: var(--checkbox-bg-color);
        }
    }

    &.is-indeterminate:after {
        width: 16px;

        @media (prefers-reduced-motion: no-preference) {
            transition: width var(--dt-motion-timing-100) var(--checkbox-motion-easing) var(--dt-motion-timing-100);
        }
    }
}

.c-checkbox-text {
    display: inline;
    flex: 1 1 auto;
    align-self: center;
    min-width: 0;
    margin-inline-start: var(--checkbox-gap);
    white-space: normal;
    color: var(--checkbox-content-color);
    font-family: var(--checkbox-font-family);
    font-size: var(--checkbox-font-size);
    line-height: var(--checkbox-line-height);
    font-weight: var(--checkbox-font-weight);
}

// Initial styles for indeterminate state
.c-checkbox-tick:after {
    content: "";
    position: relative;
    top: 47%;
    left: 14%;
    width: 0;
    height: 2px;
    background-color: white;
}

.c-checkbox-tick:dir(rtl):after {
    left: unset;
    right: 14%;
}

.c-checkbox {
    --checkbox-height: 24px;
    --checkbox-width: 24px;
    --checkbox-radius: var(--dt-radius-rounded-a);
    --checkbox-margin: 1px;
    --checkbox-gap: var(--dt-spacing-b);
    --checkbox-font-family: var(--dt-font-body-l-family);
    --checkbox-font-size: #{p.font-size(--dt-font-body-l-size)};
    --checkbox-line-height: #{p.line-height(--dt-font-body-l-line-height)};
    --checkbox-font-weight: var(--dt-font-body-l-weight);
    --checkbox-bg-color: var(--dt-color-container-default);
    --checkbox-border-color: var(--dt-color-border-form);
    --checkbox-content-color: var(--dt-color-content-default-solid);
    --checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);

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

    input {
        @include p.visually-hidden;
    }

    label {
        display: flex;
        width: 100%;
        white-space: nowrap;
        cursor: pointer;
    }

    &.c-checkbox--leading {
        label {
            flex-direction: row-reverse;
        }

        .c-checkbox-text {
            margin-inline-start: 0;
            margin-inline-end: var(--checkbox-gap);
        }
    }

    &.c-checkbox--fill {
        align-items: stretch;

        label {
            justify-content: space-between;
        }

        .c-checkbox-text {
            flex: 0 1 auto;
        }
    }

    &:hover {
        .c-checkbox-tick {
            --checkbox-bg-color: hsl(
                var(--dt-color-container-default-h),
                var(--dt-color-container-default-s),
                calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01))
            );

            @supports (background-color: color-mix(in srgb, black, white)) {
                --checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01),  var(--dt-color-container-default));
            }

            transition:
                background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),
                border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing);
        }
    }

    &:active {
        .c-checkbox-tick {
            --checkbox-bg-color: hsl(
                var(--dt-color-container-default-h),
                var(--dt-color-container-default-s),
                calc(var(--dt-color-container-default-l) - var(--dt-color-active-01))
            );

            @supports (background-color: color-mix(in srgb, black, white)) {
                --checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01),  var(--dt-color-container-default));
            }

            transition:
                background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),
                border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);
        }
    }

    &.is-disabled {
        label {
            cursor: not-allowed;
        }
    }

    input:focus-visible + label {
        .c-checkbox-tick {
            @include p.focus;
        }
    }

    &.is-disabled {
        &:hover,
        &:active {
            .c-checkbox-tick {
                --checkbox-bg-color: var(--dt-color-container-strong);
                --checkbox-border-color: var(--dt-color-disabled-01);
            }
        }
    }

    &.c-checkbox--status-error {
        &:hover {
            .c-checkbox-tick {
                --checkbox-bg-color: hsl(
                    var(--dt-color-container-default-h),
                    var(--dt-color-container-default-s),
                    calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01))
                );

                @supports (background-color: color-mix(in srgb, black, white)) {
                    --checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01),  var(--dt-color-container-default));
                }
            }
        }

        &:active {
            .c-checkbox-tick {
                --checkbox-bg-color: hsl(
                    var(--dt-color-container-default-h),
                    var(--dt-color-container-default-s),
                    calc(var(--dt-color-container-default-l) - var(--dt-color-active-01))
                );
            }

            @supports (background-color: color-mix(in srgb, black, white)) {
                --checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01),  var(--dt-color-container-default));
            }
        }
    }

    &.is-checked,
    &.is-indeterminate {
        &:not(.is-disabled):hover {
            .c-checkbox-tick {
                --checkbox-bg-color: hsl(
                    var(--dt-color-interactive-brand-h),
                    var(--dt-color-interactive-brand-s),
                    calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01))
                );
                --checkbox-border-color: var(--checkbox-bg-color);

                @supports (background-color: color-mix(in srgb, black, white)) {
                    --checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01),  var(--dt-color-interactive-brand));
                    --checkbox-border-color: var(--checkbox-bg-color);
                }
            }
        }

        &.c-checkbox--status-error:hover {
            .c-checkbox-tick {
                --checkbox-bg-color: hsl(
                    var(--dt-color-support-error-h),
                    var(--dt-color-support-error-s),
                    calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01))
                );
                --checkbox-border-color: var(--checkbox-bg-color);

                @supports (background-color: color-mix(in srgb, black, white)) {
                    --checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01),  var(--dt-color-support-error));
                    --checkbox-border-color: var(--checkbox-bg-color);
                }
            }
        }

        &:not(.is-disabled):active {
            .c-checkbox-tick {
                --checkbox-bg-color: hsl(
                    var(--dt-color-interactive-brand-h),
                    var(--dt-color-interactive-brand-s),
                    calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01))
                );
                --checkbox-border-color: var(--checkbox-bg-color);

                @supports (background-color: color-mix(in srgb, black, white)) {
                    --checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01),  var(--dt-color-interactive-brand));
                    --checkbox-border-color: var(--checkbox-bg-color);
                }
            }
        }

        &.c-checkbox--status-error:active {
            .c-checkbox-tick {
                --checkbox-bg-color: hsl(
                    var(--dt-color-support-error-h),
                    var(--dt-color-support-error-s),
                    calc(var(--dt-color-support-error-l) - var(--dt-color-active-01))
                );
                --checkbox-border-color: var(--checkbox-bg-color);

                @supports (background-color: color-mix(in srgb, black, white)) {
                    --checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01),  var(--dt-color-support-error));
                    --checkbox-border-color: var(--checkbox-bg-color);
                }
            }
        }
    }
}

// Inside an interactive container (such as a `pie-list-item`) the whole container is the interactive
// hit target and tints on hover/active. Making the resting (unchecked) tick background transparent
// lets that container tint show through the box, matching the radio (whose control background is
// transparent too). The tick-level rules for checked / indeterminate / disabled / direct hover
// still set their own background, so only the resting unchecked state changes, and only when inside
// such a container.
.c-checkbox--in-interactive-container {
    --checkbox-bg-color: transparent;
}