/* Card container for the perma. Tools and actions and whatnot */

@layer components {
    .card-perma {
        --actions-block-inset: 1.5rem;
        --actions-inline-inset: 4rem;
        --color-container: color-mix(in srgb, var(--card-color) 33%, var(--color-canvas));
        --padding-inline: calc(var(--block-space-double) + var(--block-space));
        --padding-block: calc(var(--block-space-double) + var(--block-space-half));

        align-items: start;
        column-gap: var(--inline-space);
        display: grid;
        grid-template-areas:
            "notch-top notch-top notch-top"
            "actions-left card actions-right"
            "notch-bottom notch-bottom notch-bottom";
        grid-template-columns: 48px minmax(0, 1120px) 48px;
        inline-size: fit-content;
        margin-block-start: var(--block-space);
        max-inline-size: 100%;
        margin-inline: auto;
        position: relative;

        &:has(dialog[open]) {
            z-index: 2;
        }

        &:has(.card-perma__star-input:checked) {
            .card {
                outline: 4px solid var(--color-negative);
            }
        }

        .card {
            --card-aspect-ratio: 2 / 0.95;
            --lexxy-bg-color: var(--card-bg-color);

            border: none;
        }

        .card__background {
            filter: brightness(1.2) contrast(0.8);
            opacity: 0.2;
        }

        .card__body {
            @media (max-width: 639px) {
                flex-direction: column;
            }
        }

        .card__content {
            display: flex;
            flex-direction: column;
            gap: 1ch;
        }

        .card__title {
            font-size: clamp(var(--text-medium), 6vw, var(--text-x-large));
            margin-block-end: 0.5ch;

            /* With tight line spacing, Windows will cover over adjacent lines of text
      * when input text is selected. Here, we're setting the selection color to a
      * transparent value so the overlapping text lines are at least visible. */
            ::selection {
                background: oklch(var(--lch-blue-light) / 0.5);
            }

            &:has(textarea) {
                margin-block-end: 0;

                @supports not (field-sizing: content) {
                    text-wrap: unset;
                    /* Safari is annoying if you have text-wrap: balance in textareas */
                }
            }
        }

        .card__meta,
        .card__stages {
            @media (min-width: 640px) {
                font-size: var(--text-small);
            }
        }

        .card__stages {
            max-inline-size: 32ch;

            @media (max-width: 639px) {
                border: 1px solid var(--card-color);
                border-radius: 0.25em;
                overflow: hidden;
                max-inline-size: 100%;
                padding: 0;
            }
        }

        .card__column-name {
            @media (max-width: 639px) {
                --btn-border-radius: 0;
            }
        }

        .board-picker__button {
            --btn-border-size: 0;

            font-size: 0.5em;
            margin-inline-start: 1ch;

            +.panel {
                --panel-size: 18ch;
            }
        }

        .bubble {
            --bubble-number-max: 42px;
            --bubble-size: 6rem;

            inset: calc(var(--bubble-size) / -4) calc(var(--bubble-size) / 1.5) auto auto;
            translate: 0 0;

            @media (max-width: 799px) {
                --bubble-size: 4.5rem;

                inset: calc(var(--bubble-size) / 1.5) 0 auto auto;
            }
        }

        @media (max-width: 799px) {
            --padding-inline: 1.5ch;

            column-gap: 0;
            grid-template-areas:
                "notch-top notch-top notch-top"
                "card card card"
                "actions-left notch-bottom actions-right";
            grid-template-columns: 1fr auto 1fr;
            inline-size: calc(100% + 2 * var(--padding-inline));
            margin-inline: calc(-1 * var(--padding-inline));
            max-inline-size: none;
            position: relative;
        }
    }

    /* Child items
  /* ------------------------------------------------------------------------ */

    .card-perma__bg {
        background-color: var(--color-container);
        border-radius: 0.2em;
        grid-area: card;
        padding: clamp(2rem, 4vw, var(--padding-block));

        @media (max-width: 799px) {
            padding-inline: var(--padding-inline);
        }
    }

    .card-perma__actions {
        display: grid;
        gap: var(--block-space-half);

        &:has([open]) {
            position: relative;
            z-index: 1;
        }

        &:has([data-controller~="tooltip"]:hover) {
            z-index: var(--z-tooltip);
        }
    }

    .card-perma__actions--left {
        grid-area: actions-left;
    }

    .card-perma__actions--right {
        grid-area: actions-right;
    }

    @media (max-width: 799px) {
        .card-perma__actions {
            display: flex;
            padding-inline: var(--padding-inline);
            translate: 0 -50%;
        }

        .card-perma__actions--right {
            inset-inline-end: 0;
            justify-content: flex-end;
        }
    }

    .card-perma__image-btn {

        &:has(input[type="file"]:focus),
        &:has(input[type="file"]:focus-visible) {
            outline: var(--focus-ring) !important;
            outline-offset: var(--focus-ring-offset);
        }

        input[type="file"] {
            outline: none;
        }
    }

    .card__banner {
        align-items: center;
        background-color: var(--color-highlight);
        border-radius: 2em;
        color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
        display: inline-flex;
        inline-size: auto;
        gap: var(--inline-space-half);
        grid-area: notch-top;
        justify-content: center;
        margin-block-start: -4ch;
        margin-inline: auto;
        max-inline-size: 36ch;
        padding: var(--block-space-half) var(--block-space);
        position: relative;
        text-align: center;
        translate: 0 50%;
        z-index: 0;

        .btn {
            --btn-background: var(--card-color);
            --btn-border-color: var(--card-color);
            --btn-color: var(--color-ink-inverted);
        }
    }

    /* Notches
  /* -------------------------------------------------------------------------- */

    .card-perma__notch {
        align-items: center;
        color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
        display: inline-flex;
        inline-size: auto;
        gap: var(--inline-space);
        justify-content: center;
        margin-inline: auto;
        position: relative;
        text-align: center;
        z-index: 0;
    }

    .card-perma__notch--top {
        grid-area: notch-top;
        inline-size: 100%;
        margin-block-start: -4ch;
        max-inline-size: 36ch;
        padding-inline: 1ch;
        translate: 0 50%;

        .btn {
            --btn-border-color: var(--card-color);
            --btn-color: var(--card-color);

            text-align: center;

            &:has(input:checked) {
                --btn-background: var(--card-color);
                --btn-border-color: var(--card-color);
                --btn-color: var(--color-ink-inverted);
            }
        }
    }

    .card-perma__notch--bottom {
        --half-btn-height: 1.25rem;

        grid-area: notch-bottom;

        /* Overlap the card BG by half the button height */
        &:has(.btn) {
            translate: 0 calc(-1 * var(--half-btn-height));
        }

        form {
            background-color: var(--color-canvas);
            border-radius: 99rem;
        }

        .btn:not(.popup__btn, .btn--plain, .btn--reversed) {
            --btn-background: var(--card-color);
            --btn-color: var(--color-ink-inverted);
        }

        .btn--plain {
            --btn-color: var(--card-color);

            text-decoration: underline;
        }

        .btn--reversed {
            --btn-background: var(--color-canvas);
            --btn-color: var(--card-color);
            --btn-border-color: var(--color-container);
        }

        @media (max-width: 639px) {
            flex-direction: column;
        }
    }

    .card-perma__closure-message {
        color: var(--card-color);
    }
}