/*
 * Downloadable file row — Figma "file" (4418:3894).
 *
 * The row body carries the same `glass` effect as the shortcut cards — a translucent white, which
 * is why it renders a touch darker than `Surface/default` and matches no flat token. The kind block
 * on the left stays opaque.
 *
 * Hover (4519:5673) turns the kind block pink with a white glyph, tints the body, pinks the wording
 * and frames the whole row in a 2px `Border/action` stroke.
 */

.mo-file {
    display: flex;
    height: 100%;
    align-items: stretch;
    overflow: hidden;
    border: var(--mo-border-width-xs) solid transparent;
    border-radius: var(--mo-radius-md);
    background-color: rgb(255 255 255 / 30%);
    backdrop-filter: blur(8px);
    color: inherit;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.mo-file:hover,
.mo-file:focus-visible {
    border-color: var(--mo-border-action);
    background-color: var(--mo-surface-action-light);
}

.mo-file__kind {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mo-spacing-xxs);
    padding: var(--mo-spacing-xs);
    border-right: var(--mo-border-width-xs) solid var(--mo-border-default-medium);
    background-color: var(--mo-surface-default-white);
}

.mo-file:hover .mo-file__kind,
.mo-file:focus-visible .mo-file__kind {
    border-right-color: transparent;
    background-color: var(--mo-surface-action-dark);
}

.mo-file:hover .mo-file__icon,
.mo-file:focus-visible .mo-file__icon,
.mo-file:hover .mo-file__size,
.mo-file:focus-visible .mo-file__size {
    color: var(--mo-text-default-light);
}

.mo-file:hover .mo-file__name,
.mo-file:focus-visible .mo-file__name,
.mo-file:hover .mo-file__description,
.mo-file:focus-visible .mo-file__description {
    color: var(--mo-text-action);
}

/* `Icon/disabled` in the maquette: the document glyph is a marker, not an action. */
.mo-file__icon {
    width: var(--mo-scale-600);
    height: var(--mo-scale-600);
    color: var(--mo-icon-disabled);
}

.mo-file__size {
    color: var(--mo-text-placeholder);
    font-size: var(--mo-font-size-caption);
    line-height: var(--mo-line-height-caption);
}

.mo-file__body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--mo-spacing-xxs);
    padding: var(--mo-spacing-xs) 0 var(--mo-spacing-xs) var(--mo-spacing-xs);
}

.mo-file__name {
    overflow-wrap: break-word;
    color: var(--mo-text-heading);
    font-size: var(--mo-font-size-h5);
    font-weight: var(--mo-font-weight-bold);
    line-height: var(--mo-line-height-h5);
}

.mo-file__description {
    color: var(--mo-text-placeholder);
    font-size: var(--mo-font-size-body-sm);
    font-weight: var(--mo-font-weight-semibold);
    line-height: var(--mo-line-height-body-sm);
}

.mo-file__action {
    display: flex;
    flex: none;
    align-items: flex-end;
    padding: var(--mo-spacing-xs);
}

.mo-file__download {
    width: var(--mo-scale-300);
    height: var(--mo-scale-250);
    color: var(--mo-icon-action);
}