/*
 * Plano — "Plan a route".
 *
 * The window is a pattern (Plano → Settings → the route planner window), so
 * its layout is whatever blocks it is built from. The parts are the block
 * `plano/route-item`, which renders like a button block (`wp-block-button
 * [is-style-outline]` > `wp-block-button__link wp-element-button`), so
 * theme.json's buttons and outline style apply; the box
 * takes the theme's base and contrast colours and inherits its type. Everything
 * below is a fallback inside `:where()`, which weighs nothing: any rule of the
 * theme wins without `!important`.
 *
 * To restyle, set the variables — in Additional CSS, say:
 *
 *     .plano-route-dialog {
 *         --plano-route-background: #fffbea;
 *         --plano-route-radius: 0;
 *         --plano-route-title-size: 1.5rem;
 *     }
 *
 * or write rules for the classes: .plano-route-dialog, .plano-route-title,
 * .plano-route-address, .plano-route-item, .plano-route-close (the × the
 * window adds itself), and [data-plano-item="waze"] and the like for one
 * action. The pattern that ships has .plano-route-options around the buttons.
 */

:where(.plano-route-dialog) {
    --plano-route-background: var(--wp--preset--color--base, #fff);
    --plano-route-color: var(--wp--preset--color--contrast, inherit);
    --plano-route-radius: 12px;
    --plano-route-padding: 1.5rem;
    --plano-route-width: 24rem;
    --plano-route-title-size: 1.25rem;
    --plano-route-gap: .5rem;
    --plano-route-backdrop: rgba(0, 0, 0, .45);
}

/* The block's own button. */
:where(.wp-block-plano-route) .plano-route {
    display: inline-flex;
    align-items: center;
    gap: .4em;
}

.plano-route-icon {
    flex: none;
}

/* The dialog. */
:where(.plano-route-dialog) {
    width: min(var(--plano-route-width), calc(100vw - 2rem));
    box-sizing: border-box;
    padding: var(--plano-route-padding);
    border: 0;
    border-radius: var(--plano-route-radius);
    color: var(--plano-route-color);
    background: var(--plano-route-background);
    font: inherit;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

.plano-route-dialog::backdrop {
    background: var(--plano-route-backdrop, rgba(0, 0, 0, .45));
}

/*
 * Not inside :where(): a theme's h2 is a page heading (80px on AFO), and the
 * one rule that weighs nothing lost to it. One class still beats `h2`, and
 * Additional CSS, which loads later, beats this.
 */
.plano-route-dialog .plano-route-title {
    margin: 0 0 .25rem;
    padding-right: 2rem;
    font-size: var(--plano-route-title-size);
    line-height: 1.2;
}

:where(.plano-route-address) {
    margin: 0 0 1rem;
    opacity: .75;
}

:where(.plano-route-options) {
    display: grid;
    gap: var(--plano-route-gap);
    margin: 0;
}

/*
 * The space between the parts is the gap of what holds them; a theme's block
 * spacing would add its own on top, and wins over :where().
 */
.plano-route-dialog .plano-route-item {
    margin-block: 0;
}

/* Full width, whatever the theme makes a button. */
:where(.plano-route-dialog) .wp-block-button {
    width: 100%;
    margin: 0;
}

:where(.plano-route-dialog) .wp-block-button__link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
}

/*
 * An outline button for a theme that defines none: WordPress prints the
 * outline style only on pages with a button block on them.
 */
:where(.wp-block-plano-route-item.is-style-outline) > .wp-block-button__link {
    border: 1px solid currentColor;
    color: inherit;
    background: transparent;
}

/* Closing is the window's own, top right, whatever the pattern holds. */
:where(.plano-route-close) {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: inherit;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
}

:where(.plano-route-close):hover,
:where(.plano-route-close):focus-visible {
    opacity: 1;
}