@import '../src/styles/vendor/@carbon/elements/scss/themes/mixins';

body {
	margin: 0;

	/* width */
	&::-webkit-scrollbar {
		width: 10px;
	}

	/* Track */
	&::-webkit-scrollbar-track {
		background: #f1f1f1;
	}

	/* Handle */
	&::-webkit-scrollbar-thumb {
		background: #888;
	}

	/* Handle on hover */
	&::-webkit-scrollbar-thumb:hover {
		background: #555;
	}
}

div.container {
	font-family: 'IBM Plex Sans', Arial, sans-serif;
	padding: 30px;

	&.theme--white {
		@import '../src/styles/styles-white.scss';

		@include carbon--theme($carbon--theme--white) {
			color: $text-01;
			background-color: $ui-background;
			line-height: 1;
		}
	}

	&.theme--g10 {
		@import '../src/styles/styles-g10.scss';

		@include carbon--theme($carbon--theme--g10) {
			color: $text-01;
			background-color: $ui-background;
			line-height: 1;
		}
	}

	&.theme--g90 {
		@import '../src/styles/styles-g90.scss';

		@include carbon--theme($carbon--theme--g90) {
			color: $text-01;
			background-color: $ui-background;
			line-height: 1;

			.bx--radio-button__appearance {
				background-color: transparent;
				border-color: $icon-01;
			}

			.bx--radio-button:checked
				+ .bx--radio-button__label
				.bx--radio-button__appearance {
				border-color: $icon-01;

				&:before {
					background-color: $icon-01;

					// Allow the selected button to be seen in Windows HCM for IE/Edge
					@media screen and (-ms-high-contrast: active) {
						// Utilize a system color variable to accomodate any user HCM theme
						background-color: windowText;
					}
				}
			}
		}
	}

	&.theme--g100 {
		@import '../src/styles/styles-g100.scss';

		@include carbon--theme($carbon--theme--g100) {
			color: $text-01;
			background-color: $ui-background;
			line-height: 1;

			.bx--radio-button__appearance {
				background-color: transparent;
				border-color: $icon-01;
			}

			.bx--radio-button:checked
				+ .bx--radio-button__label
				.bx--radio-button__appearance {
				border-color: $icon-01;

				&:before {
					background-color: $icon-01;

					// Allow the selected button to be seen in Windows HCM for IE/Edge
					@media screen and (-ms-high-contrast: active) {
						// Utilize a system color variable to accomodate any user HCM theme
						background-color: windowText;
					}
				}
			}
		}
	}

	&.theme--g90,
	&.theme--g100 {
		div#color-palette-picker div.bx--select label.bx--label {
			color: #fff;
			opacity: 0.6;
		}
	}

	@import '../src/styles/vendor/carbon-components/scss/globals/grid/grid';
	@import '../src/styles/vendor/carbon-components/scss/components/button/button';
	@import '../src/styles/vendor/carbon-components/scss/components/select/select';
	@import '../src/styles/vendor/carbon-components/scss/components/tag/tag';
	@import '../src/styles/vendor/carbon-components/scss/components/radio-button/radio-button';
	@import '../src/styles/vendor/carbon-components/scss/components/notification/inline-notification';

	#chart-demo {
		max-width: 700px;
	}

	.bx--grid {
		padding: 0;

		.bx--row .chart-demo {
			margin-bottom: 60px;
		}
	}

	a {
		color: #78a9ff;
	}

	h3 {
		margin: 0;
		font-weight: 700;

		b.component {
			margin-right: 10px;
		}

		span.bx--tag.component-name {
			font-size: 0.8em;
			padding: 0.25em 1em;
			border-radius: 1em;
			font-weight: 600;
		}
	}

	div.theme-picker {
		margin-top: 15px;
	}

	p.props {
		b {
			font-weight: 700;
		}
	}

	// Replace with Carbon .scss imports
	div.bx--snippet--multi {
		background-color: black;
		color: white;

		pre {
			padding: 2em !important;
			-moz-tab-size: 4;
			tab-size: 4;
		}

		.bx--snippet-container pre::after {
			display: none;
		}

		.token.tag {
			color: #6ea6ff;
		}

		.token.attr-name {
			color: #92eeee;
		}

		.token.attr-value {
			color: #bb8eff;
		}
	}

	.bx--snippet--multi .bx--snippet-container pre code {
		font-size: 14px;
	}

	.bx--snippet--multi.bx--snippet--expand .bx--snippet-container,
	.bx--snippet--multi.bx--snippet--expand .bx--snippet-container pre {
		padding-bottom: 0;
	}

	&.intro {
		display: flex;
		height: 100vh;
		color: #fff;
		background-color: #171717;
		padding: 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;

		&:before {
			content: '';
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16' xml:space='preserve'%3E%3Crect width='16' fill='none' height='16'/%3E%3Crect x='0' y='0' fill='white' width='1' height='1'/%3E%3C/svg%3E");
			background-color: #171717;
			background-size: 16px;
			opacity: 0.2;
		}

		div.content {
			position: relative;

			div.logo {
				border-radius: 20px;
				width: 120px;
				height: 120px;
				margin: auto;
				margin-bottom: 25px;

				img {
					width: 120px;
					height: 120px;
				}
			}

			div.content {
				max-width: 800px;
				margin: auto;

				div.links {
					display: table;
					margin: auto;

					.bx--btn {
						float: left;
						margin-right: 5px;
						max-height: 30px;
						padding-right: 15px;

						&.last {
							margin-right: 0;
						}

						svg {
							margin-right: 5px;

							&.angular {
								width: 22px;
								height: 22px;
							}

							&.react {
								width: 25px;
								height: 25px;
								margin-left: -5px;
							}

							&.vue {
								width: 18px;
								height: 18px;
							}
						}
					}
				}
			}

			h1 {
				font-size: 2.25rem;
				font-weight: 600;
				margin-top: 20px;
				margin-bottom: 5px;
			}

			h3 {
				font-size: 1.25rem;
				font-weight: 300;
			}

			span.netlify {
				display: table;
				border-radius: 30px;
				padding: 8px 15px;
				font-size: 13px;
				vertical-align: middle;
				background-color: #292929;
				color: #bcbcbc;
				margin: 15px auto 45px auto;

				a {
					color: #fff;
					text-decoration: none;
				}
			}
		}
	}

	&.tutorial {
		@import '~highlight.js/styles/sunburst.css';

		h1,
		h5,
		p,
		pre {
			margin-bottom: 15px;
		}

		h5 {
			margin-top: 30px;
		}

		ul li {
			margin-bottom: 0.5em;

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

		code {
			border-radius: 4px;
			background-color: #e0e0e0;
			color: #161616;
			padding: 0 0.5em;
		}

		pre {
			background-color: black;
			color: white;
			padding: 15px;
			-moz-tab-size: 4;
			tab-size: 4;
			font-size: 14px;

			code {
				background-color: unset;
				color: white;
				padding: 0;
			}
		}
	}

	.marginTop {
		margin-top: 10px;

		&-15 {
			margin-top: 15px;
		}

		&-30 {
			margin-top: 30px;
		}
	}

	hr {
		margin-bottom: 75px;
		margin-top: 25px;
	}
}