/*
 * Shortcut row — Figma "shortcuts" (4634:54287) and "shorcut" (4130:442).
 *
 * The quick access row repeated at the bottom of every page. The cards are translucent white with
 * a glass effect in Figma; `backdrop-filter` reproduces it where supported and the 30% white keeps
 * the card readable where it is not.
 */

/* 16px between the heading and the row on all four canvases, where `Spacing/xs` steps to 8. */
.mo-shortcuts {
    display: flex;
    flex-direction: column;
    gap: var(--mo-scale-200);
}

.mo-shortcuts__title {
    margin: 0;
    color: var(--mo-text-heading);
    font-size: var(--mo-font-size-h4);
    font-weight: var(--mo-font-weight-semibold);
    line-height: var(--mo-line-height-h4);
}

/*
 * The row is drawn once per canvas, and each drawing fixes its own column count: 2 on Mobile
 * (4639:25397, 432px wide), 2 on Tablet (4639:25352, 688px), 4 on Laptop (4639:25307, 1312px) and
 * 6 on Desktop (4634:54286, 1680px). An `auto-fill` track cannot land on that sequence — it gave
 * one column on Mobile and five on Laptop — so the counts are declared.
 */
.mo-shortcuts__list {
    display: grid;
    gap: var(--mo-spacing-sm);
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 1440px) {
    .mo-shortcuts__list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1920px) {
    .mo-shortcuts__list {
        grid-template-columns: repeat(6, 1fr);
    }
}

/*
 * The card is 56px tall on Mobile and 72px from Tablet up — heights the maquette draws rather than
 * derives, and which the arithmetic of the four frames confirms. Declaring the height instead of a
 * padding keeps it off `Spacing/sm`, which steps at 1440 where this component steps at 768.
 */
.mo-shortcut {
    display: flex;
    height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: var(--mo-spacing-xs);
    padding-inline: var(--mo-spacing-xs);
    border: var(--mo-border-width-xs) solid var(--mo-border-default-light);
    border-radius: var(--mo-radius-md);
    background-color: rgb(255 255 255 / 30%);
    backdrop-filter: blur(8px);
    color: var(--mo-text-body);
    text-decoration: none;
}

@media (min-width: 768px) {
    .mo-shortcut {
        height: 72px;
        padding-inline: var(--mo-scale-300);
    }
}

/*
 * Hover (4130:439): the glass becomes opaque white, the card takes the pink outline and everything
 * on it turns pink.
 */
.mo-shortcut:hover,
.mo-shortcut:focus-visible {
    border-color: var(--mo-border-action);
    background-color: var(--mo-surface-default-white);
    color: var(--mo-text-action);
}

.mo-shortcut__label {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--mo-spacing-xxs);
    font-size: var(--mo-font-size-h5);
    font-weight: var(--mo-font-weight-semibold);
    line-height: var(--mo-line-height-h5);
}

.mo-shortcut__icon {
    width: var(--mo-scale-300);
    height: var(--mo-scale-300);
    flex: none;
    color: var(--mo-icon-action);
}

.mo-shortcut__chevron {
    width: var(--mo-scale-200);
    height: var(--mo-scale-200);
    flex: none;
}