@use '../tokens/index.scss' as tokens;
@use '../mixins/index.scss' as mixins;
@use './button.scss' as button;

$code-block-font-size: tokens.$font-size-8 !default;
$code-block-border-color: tokens.$code-block-border !default;
$code-block-border-width: tokens.$border-width !default;
$code-block-border-radius: tokens.$border-radius !default;

$code-block-header-min-height: 2rem !default;
$code-block-header-color: tokens.$text !default;
$code-block-header-background-color: tokens.$code-header !default;
$code-block-header-font-weight: tokens.$weight-semibold !default;
$code-block-header-gap: tokens.$spacer-2 !default;
$code-block-header-padding-vertical: tokens.$spacer-1 !default;
$code-block-header-padding-horizontal: tokens.$spacer-4 tokens.$spacer-3 !default;

$code-block-control-padding: calc(0.125em - #{button.$button-border-width}) !default;

.code-block {
	position: relative;
	border: $code-block-border-width solid $code-block-border-color;
	border-radius: $code-block-border-radius;
	font-size: $code-block-font-size;
	overflow: hidden;

	.code-block-header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		min-height: $code-block-header-min-height;
		background-color: $code-block-header-background-color;
		color: $code-block-header-color;
		font-weight: $code-block-header-font-weight;
		gap: $code-block-header-gap;
		border-block-end: $code-block-border-width solid $code-block-border-color;
		padding-block: $code-block-header-padding-vertical;
		padding-inline: $code-block-header-padding-horizontal;

		@include mixins.tablet {
			flex-wrap: nowrap;
		}

		.code-block-header-language {
			flex-grow: 1;
		}

		.code-block-header-action-bar {
			display: flex;
			gap: $code-block-header-gap;
			margin-inline-start: auto;

			.button {
				min-height: auto;
				outline-color: currentColor;
				outline-offset: -(tokens.$focus-width);
				font-size: button.$button-sm-font-size;
				padding-block: $code-block-control-padding;
			}
		}
	}

	.code-block-body {
		@include mixins.code-block(true);
	}
}