@layer components {
    .ui-file-meta {
        border-radius: var(--rounded);
        background-color: var(--ui-50);
        display: flex;
        padding: var(--spaceing);
        gap: var(--spaceing);

        .icon {
            border-radius: var(--rounded);
            background-color: var(--ui-0);
            display: grid;
            place-items: center;
            padding: var(--spaceing-md) var(--spaceing);
        }

        .meta-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .actions {
            margin-left: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: var(--spaceing);
        }

        /* Basecamp #10261938601 (Torleiv, "PDF i leverandør kort lar seg
           ikke åpne"): wraps just the icon+meta-info portion (see
           ui_file's own href: param, sand_ui/file_helper.rb) — display:
           flex + the same gap keeps .icon/.meta-info laid out exactly as
           they were as plain flex-item siblings before this link existed
           around them. */
        .ui-file-meta__open {
            display: flex;
            gap: var(--spaceing);
            color: inherit;
            text-decoration: none;
        }

        .title {
            letter-spacing: var(--letter-spacing);
        }

        .description {
            font-size: var(--font-size-sm);
            color: var(--text-500);
        }

        &.upload {
            color: var(--text-700);
            border: var(--border-width) dashed var(--border-color);
            background-color: var(--background-color);
            min-height: var(--height-3xl);
            height: 100%;
        }
    }
}