/* #region Host */

:host {
    --app-card-aspect-ratio: 4 / 3;
    --app-card-min-width: 6.5rem;
    --app-group-header-min-height: calc(var(--app-card-min-width) / 4);
    --app-icon-offset: 1rem;
    --app-card-row-coefficient: 3.5;

    @media (min-width: 390px) {
        --app-card-aspect-ratio: 1;
        --app-group-template-columns: repeat(auto-fill, var(--app-card-min-width));
    }

    @media (min-width: 409px) {
        --app-card-min-width: 7rem;
    }

    @media (min-width: 768px) {
        --app-icon-offset: 0.5rem;
        --app-card-min-width: 10rem;
    }
}

/* #region Card */

.card-header-aspect-wrapper {
    display: grid;
    grid-template-columns: 1fr;

    padding-inline: 1rem;
    padding-block: calc(var(--pf-global--LineHeight--md) * var(--app-card-title-padding));
    height: 100%;
    position: relative;
    position: absolute;
    inset: 0;
}

[part="card"] {
    transition: box-shadow 150ms ease-in-out;
    border: 0.5px solid var(--pf-global--BorderColor--100);
    height: 100%;

    &:hover {
        --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--xl-bottom);
    }
}

[data-anchor-strategy="anchor-position"] [part="card"] {
    transform: translate3d(0, 0, 0); /* Fixes rendering artifacts on mobile. */
}

/* #region Header */

[part="card-header"] {
    padding: 0 !important;

    display: grid;
    grid-template-rows: repeat(
        auto-fill,
        minmax(calc(var(--app-card-min-width) / var(--app-card-row-coefficient)), auto)
    );

    &:hover {
        text-decoration: none;

        .pf-c-card__title {
            text-decoration: underline;
        }
    }
}

/* #region Title */

[part="card-title"] {
    padding: 0 !important;
    z-index: 1;
    text-stroke-width: 0.15em;
    text-stroke-color: var(--pf-c-card--BackgroundColor);

    -webkit-text-stroke-width: 0.15em;
    -webkit-text-stroke-color: var(--pf-c-card--BackgroundColor);
    paint-order: stroke fill;

    display: flex;
    grid-row: -2 / -2;
    justify-content: center;
    height: 100%;
    align-items: center;

    .clamp-wrapper {
        --clamp-padding: calc(0.1em * var(--app-card-row-coefficient));

        display: box;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        box-orient: vertical;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: center;
        text-wrap: balance;
        line-height: 1.2;
        padding-block: var(--clamp-padding);
        max-height: calc((var(--pf-global--LineHeight--md) * 2rem) - (var(--clamp-padding) / 2));
    }
}

/* #region Icon */

ak-app-icon {
    --icon-height: 50%;
    --icon-font-size: calc(var(--app-card-min-width) / 2.3);
    --app-icon--shadow-background-color: var(--pf-c-card--BackgroundColor);

    &::part(icon) {
        position: absolute;
        inset: 0;
        object-fit: contain;
        place-self: center;
        inset-block-start: -1.5rem;
        inset-block-end: var(--app-icon-offset, 0);
        padding: 0;

        @media (max-width: 767px) {
            inset-block-start: -0.75rem;
        }
    }
}

/* #region Group Header */

[part="app-group-header"] {
    @media not (prefers-contrast: more) {
        --ak-fieldset__legend--PaddingInlineBase: 1rem;
        padding-block-start: 0 !important;
        padding-inline: 0 !important;
        margin-inline: 0 !important;
    }
}

/* #region App List */

[part="app-list"] {
    display: grid;
    gap: var(--pf-global--spacer--md);

    grid-template-columns: repeat(var(--app-list-column-count, 1), 1fr);
    justify-items: center;

    @media (max-width: 767px) {
        --app-list-column-count: 1 !important;
        justify-items: normal;
    }
}

/* #region App Group */

[part="app-group"] {
    --app-group-border-color: transparent;

    display: grid;
    gap: var(--pf-global--spacer--md);
    grid-template-columns: var(--app-group-template-columns, 1fr);
    width: round(down, 100%, calc(var(--app-card-min-width) / var(--app-list-column-count, 1)));
    grid-auto-rows: minmax(min-content, 0);

    @media (max-width: 767px) {
        width: auto;
        grid-template-rows: auto;
    }

    @media not (prefers-contrast: more) {
        padding: 0 !important;
        border: none !important;
    }
}

/* #region Group Separator */

[part="app-group-separator"] {
    grid-column: 1 / -1;
    border-color: transparent;
}

/* #region Card Wrapper */

[part="card-wrapper"] {
    aspect-ratio: var(--app-card-aspect-ratio);
    position: relative;

    contain-intrinsic-size: var(--app-card-min-width);

    &[aria-selected="true"] {
        outline: auto var(--ak-accent);
    }
}

/* #region Card Header Actions Description */

[part="card-header-action-description"] {
    text-wrap: balance;
    text-wrap: pretty; /* Supporting browsers. */
}

/* #region Card Header Actions */

[part="card-header-actions"] {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
}

/* #region Card Header Actions Menu */

[part="card-header-actions-menu"] {
    inset: auto;
    border: none;

    width: max-content;
    min-width: 10ch;
    max-width: 20ch;
    /* This drop shadow both adds contrast and forces Firefox to order the layers correctly. */
    filter: drop-shadow(0px 3px 1px var(--pf-global--BackgroundColor--dark-transparent-200));

    li {
        list-style-type: none;
    }
}

[data-anchor-strategy="anchor-position"] [part="card-header-actions-menu"] {
    position: fixed;
    inset-inline-start: auto;
    inset-block-start: anchor(end);
    inset-inline-end: anchor(end);

    transform: translate3d(0, 0, 0); /* Fixes rendering artifacts on mobile. */

    &:popover-open {
        display: block;
    }

    @media (min-width: 390px) {
        inset-inline-start: anchor(center);
    }
}

/* Fallback if popover + anchor positioning is not supported */
[data-anchor-strategy="fallback"] [part="card-header-actions-menu"] {
    display: none;
    position: absolute;
    inset-inline: auto calc(100% - 1.5em);

    @media (min-width: 390px) {
        inset-block-start: 0;
        inset-inline-start: 100%;
    }
}

[data-anchor-strategy="fallback"]
    [part="card-header-actions"]:focus-within
    [part="card-header-actions-menu"] {
    display: block;
}

/* #region Card Header Actions Button */

[part="card-header-actions-button"] {
    border: 0.5px solid transparent;
    border-end-start-radius: var(--pf-global--BorderRadius--sm);

    --pf-c-dropdown__toggle--before--BorderWidth: 0;

    &:hover {
        --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-card--m-flat--BorderColor);
        border-color: var(--pf-c-card--m-flat--BorderColor);
    }
}

/* #region Card Header Actions icon */

[part="card-header-actions-icon"] {
    font-weight: bold;
    font-family:
        system-ui,
        -apple-system,
        monospace;
}
