/* Shared interface icon sizes. Magic mana symbols keep their own game typography. */
:root {
    --icon-size-sm: 12px;
    --icon-size: 14px;
    --icon-size-lg: 16px;
    --icon-stroke-width: 2;
    --icon-tap-size: 44px;
}

.ui-icon--sm { --icon-size: var(--icon-size-sm); }
.ui-icon--lg { --icon-size: var(--icon-size-lg); }

/* The same artwork navigation button in popups, content rows, and playtesting. */
.row-navigation-button {
    --row-control-offset: max(calc(var(--icon-tap-size) * -.5), calc(4px - var(--page-gutter)));
    display: grid;
    place-items: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--icon-tap-size);
    height: var(--icon-tap-size);
    min-width: var(--icon-tap-size);
    min-height: var(--icon-tap-size);
    margin: 0;
    padding: .4rem;
    border: 1px solid #ffffff66;
    border-radius: .4rem;
    background: #181b20eb;
    color: #fff;
    box-shadow: 0 2px 6px #0002;
    cursor: pointer;
}
.row-navigation-button:enabled:hover, .row-navigation-button:focus-visible { border-color: #c8e4cd; background: #344d3a; }
.row-navigation-button:focus-visible { outline: 3px solid #c8e4cd; outline-offset: 1px; }
.row-navigation-button:disabled { visibility: hidden; }
.row-navigation-button[hidden] { display: none !important; }

.horizontal-row-shell {
    position: relative;
    min-width: 0;
    max-width: 100%;
}
.horizontal-row-shell > .horizontal-row-step { position: absolute; z-index: 3; top: 50%; }
.horizontal-row-step[data-horizontal-row-step="-1"] { left: var(--row-control-offset); transform: translateY(-50%); }
.horizontal-row-step[data-horizontal-row-step="1"] { right: var(--row-control-offset); transform: translateY(-50%); }

/* Press feedback must not scale the icon or its hit area. */
.button:has(.ui-icon):active, summary.button:active, .nav-toggle:active,
.builder-topbar > .button[popovertarget="deck-settings"]:active {
    transform: none;
}

/* This is the single sizing authority, including older component SVG rules. */
svg.ui-icon {
    display: inline-block;
    width: var(--icon-size) !important;
    height: var(--icon-size) !important;
    min-width: var(--icon-size) !important;
    min-height: var(--icon-size) !important;
    max-width: var(--icon-size) !important;
    max-height: var(--icon-size) !important;
    flex: 0 0 var(--icon-size) !important;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.deck-favorite.is-active .ui-icon {
    fill: currentColor;
}

.card-tag-remove { display: grid; place-items: center; }
.filter-chip-remove { width: var(--icon-size-sm); height: var(--icon-size-sm); flex-shrink: 0; }
.text-link:has(.ui-icon), .admin-deck-view {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* Keep the native search-clear behavior while using the same Lucide X. */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: var(--icon-size);
    height: var(--icon-size);
    margin-left: .4rem;
    background-color: currentColor;
    mask: url("/static/vendor/lucide/1.57.0/x.svg") center / var(--icon-size) var(--icon-size) no-repeat;
    cursor: pointer;
}

/* Grow the button's tap area without changing its icon. */
@media (max-width: 63.99rem), (pointer: coarse) {
    .icon-button, .quantity-button, .back-link, .deck-price-info-trigger,
    .card-tags .card-tag-remove, .shared-deck-item .favorite-deck-remove,
    .filter-chip, .admin-deck-edit > summary, .admin-deck-view,
    .deck-rules-details > summary, .text-link:has(.ui-icon), .card-tag-drag {
        min-width: var(--icon-tap-size);
        min-height: var(--icon-tap-size);
    }

    .card-tags[data-card-tags-editable=true] .card-tag form { flex-basis: var(--icon-tap-size); }

    /* WebKit centers the larger native hit area without negative block margins. */
    input[type="search"]::-webkit-search-cancel-button {
        width: var(--icon-tap-size);
        height: var(--icon-tap-size);
        margin-block: 0;
        margin-inline: 0 -.5rem;
    }
}