@use "@gloria/base/_mixins.scss" as *;
@use "@gloria/a11y/_mixins.scss" as *;

.c-code-block {
	position: relative;
	margin: var(--spacing-7) 0;
	background-color: var(--color-gray-200);
	border-radius: var(--radius-1);
	overflow: hidden;

	&:not(:first-child) {
		border: 1px solid var(--color-gray-500);
	}

	&:last-child {
		margin-bottom: 0;
	}

	&--scrollable pre {
		max-height: min(80vh, 500px);
		overflow-y: auto;
	}

	&--has-vertical-scroll .c-code-block__copy-button {
		right: var(--spacing-5);
	}

	&[data-status="ready"],
	&[data-status="success"] {
		pre					{ display: block; }
		.c-skeleton-lines	{ display: none; }
	}

	&[data-status="loading"] {
		.c-skeleton-lines {
			display: block;
		}

		pre, .c-code-block__copy-button {
			display: none;
		}
	}

	pre,
	&__skeleton {
		padding: var(--spacing-4);
	}

	pre {
		overflow: auto;
		margin: 0;
		background: inherit !important;

		@include a11y-keyboard-focus-ring;
		@include scrollbar;
	}

	code {
		display: block;
		font-family: var(--font-family-monospace);
		font-size: var(--font-size-sm);
		line-height: var(--line-height-base);
		counter-reset: step;
  		counter-increment: step 0;
	}

	&__copy-button {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		width: 28px;
		height: 28px;
		top: var(--spacing-4);
		right: var(--spacing-4);
		padding: var(--spacing-1);
		font-size: var(--font-size-lg);
		opacity: 0.6;

		@include a11y-keyboard-focus-ring( true, false, opacity 0.2s var(--cbuc-quad-in) );

		&:hover {
			opacity: 1;
		}

		.c-code-block__check-icon {
			display: none;
			color: var(--color-success);
		}

		.c-code-block__copy-icon {
			color: var(--color-gray-800);
		}

		&--success {
			.c-code-block__copy-icon {
				display: none;
			}

			.c-code-block__check-icon {
				display: block;
			}
		}
	}

	.b-inline-code {
		margin: 0;
		padding: 0;
		background-color: transparent;
	}
}
