@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);
        }

        .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%;
        }
    }
}