@import 'typography.scss';
@import '../src/style/scss/style.scss';
@import '~prismjs/themes/prism.css';

body {
	@include base-font-regular();
	margin: 15px;
	max-width: 800px;
}

a {
	color: #1474f3;
	text-decoration: none;
	border-bottom: 1px solid #1474f3;
	padding-bottom: 2px;
}

.colors-table {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	font-size: 13px;
	.color-section {
		display: flex;
		flex-direction: column;
		margin: 10px 0;
		min-width: 150px;
		div {
			align-self: center;
			user-select: text;
		}
		$circle-size: 40px;
		.color-circle {
			height: $circle-size;
			width: $circle-size;
			border-radius: $circle-size;
			padding: 10px;
			text-align: center;
		}
	}
}

.icons-screen {
	width: 1190px;
	.missing-icon-section {
		border-top: 1px solid $light-gray;
		padding-top: 10px;
	}
	.icons-option-selector {
		margin-top: 20px;
		margin-bottom: 20px;
		display: flex;
		.option-container {
			display: flex;
			flex-direction: column;
			flex-basis: 100%;
			margin-right: 20px;
		}
	}

	.icons-table {
		margin-top: 50px;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		border-top: 1px solid $light-gray;
		justify-content: flex-start;
		.icon-section {
			display: flex;
			flex-direction: column;
			margin: 10px;
			min-width: 150px;
			.svg-icon-wrapper {
				cursor: pointer;
				width: 20px;
				height: 42px;
				margin-left: auto;
				margin-right: auto;
				.svg-icon-label {
					font-size: 12px;
				}
			}
		}
	}

	.svg-icon {
		&.storybook-big {
			width: 120px;
			height: 120px;
		}
		&.storybook-small {
			width: 60px;
			height: 60px;
		}
	}
}

.sdc-popup-menu {
	@include box-shadow(0 1px 3px 0 rgba(0, 0, 0, 0.2));
	width: 200px;
	height: 200px;
	border: 1px solid $light-gray;
}

.typography-screen {
	.typography-section {
		margin: 20px 0;
	}
	ul {
		font-size: 18px;
	}
	.typo-table {
		.typo-section {
			div {
				display: inline-block;
				//border: 1px solid black;
				width: 30%;
				margin: 4px 0;
			}
			.sample-text {
				white-space: nowrap;

			}
		}
	}
	.heading-1 {
		@include heading-1;
	}
	.heading-2 {
		@include heading-2;
	}
	.heading-3 {
		@include heading-3;
	}
	.heading-4 {
		@include heading-4;
	}
	.heading-4-emphasis {
		@include heading-4-emphasis;
	}
	.heading-5 {
		@include heading-5;
	}

	.body-1 {
		@include body-1;
	}

	.body-1-italic {
		@include body-1-italic;
	}

	.body-2 {
		@include body-2;
	}

	.body-2-emphasis {
		@include body-2-emphasis;
	}

	.body-3 {
		@include body-3;
	}

	.body-3-emphasis {
		@include body-3-emphasis;
	}

	.body-4 {
		@include body-4;
	}
}

.source-toggle-wrapper {
	.source-toggle-title {
		@include heading-2;
	}
	.source-toggle {
		display: flex;
		border-top: 1px solid $light-gray;
		padding: 10px 0;
		&:first-child {
			border-top: none;
		}
		.source-toggle-example {
			flex-basis: 40%;
			flex-shrink: 0;
		}
		.source-toggle-code {
			background-color: $light-silver;
			padding: 5px;
			margin-left: 30px;
			pre {
				margin-top: 0;
				user-select: text;
				overflow-x: auto;
				overflow-y: hidden;
				max-width: 800px;
				code {
					font-size: 15px;
					font-weight: 600;
					padding: 2px 5px;
					border: 1px solid #eae9e9;
					border-radius: 4px;
					background-color: #f3f2f2;
					color: #3a3a3a;
					.token {
						line-height: 20px;
					}
				}
			}
			.source-toggle-code-tabs {
				display: flex;
				margin-bottom: 10px;
				.source-toggle-tab {
					@include body-1;
					@include base-font-semibold;
					margin-right: 20px;
					cursor: pointer;
					&.selected {
						border-bottom: 2px solid $dark-blue;
						color: $dark-blue;
						font-weight: bold;
					}
				}
			}
		}
	}
}