.periscope-card {
	border-radius: 4px;
	border: 1px solid var(--l1-border);
	background: var(--card);
	color: var(--l1-foreground);

	.periscope-card-header {
		padding: 12px;
		width: 100%;
		border-bottom: 1px solid var(--l1-border);

		display: flex;
		align-items: center;
		flex-direction: row;
		gap: 1rem;
	}

	.periscope-card-content {
		padding: 12px;
		width: 100%;
	}

	.periscope-card-footer {
		border-top: 1px solid var(--l1-border);
		padding: 12px;
		width: 100%;
	}

	&.small {
		.periscope-card-header {
			padding: 8px;
		}

		.periscope-card-content {
			padding: 8px;
		}

		.periscope-card-footer {
			padding: 8px;
		}
	}

	&.medium {
		.periscope-card-header {
			padding: 12px;
		}

		.periscope-card-content {
			padding: 12px;
		}

		.periscope-card-footer {
			padding: 12px;
		}
	}

	&.large {
		.periscope-card-header {
			padding: 16px;
		}

		.periscope-card-content {
			padding: 16px;
		}

		.periscope-card-footer {
			padding: 16px;
		}
	}
}
