.file {
	border-radius: var(--rounded);
	background-color: var(--color-button-bg);
	box-shadow: var(--shadow-raised-sm), var(--shadow-inset);

	&:is(a):hover {
		filter: brightness(0.9);
	}

	&--primary {
		background-color: var(--color-brand-light);
	}

	&__tab {
		display: flex;
		align-items: center;
		padding: 0.75rem 1rem;
		gap: 1rem;

		:global(.icon) {
			/* Uses `px` to make icons slightly larger */
			min-width: 18px;
			height: 18px;
		}

		&__name {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			margin-right: auto;

			@media (width <= 900px) {
				word-break: break-all;
			}
		}
	}

	&__preview {
		width: 100%;
		border-radius: var(--rounded-bottom);
		overflow: hidden;
		display: flex;
		justify-content: center;
		background-color: black;

		&__image {
			height: auto;
			max-height: 22rem;
			width: 100%;
			object-fit: contain;
		}
	}
}