// Functions =========================================================================
  @function tint($color, $percent){
  	@return mix(white, $color, $percent);
  }
  @function shade($color, $percent){
  	@return mix(black, $color, $percent);
  }


// Variables =========================================================================
	$black : #100a09;
	$gray : #828280;
	$white : #fff;

	$black : #100a09;
	$lightgray : #d3d0c9;
	$gray : mix($black, $lightgray, 20%);

	$blue : #3960ab;
		$lightblue : mix($blue, $lightgray, 10%);
	$twitter : #1DA1F2;
	$facebook : #3C599F;

	$radius : 4px;
	$transition : .2s;

	$tablet : 650px;
	$desktop : 1200px;
	$mega : 1500px;

	$shadow : 0 1px 2px rgba(#000, .25);
	$shadow-dark : 0 1px 2px rgba(#000, .5);
	$shadow-hover : 0 2px 3px rgba(#000, .25);

	$sans-serif : 100%/1.4 Alegreya Sans, sans-serif;
	$monospace: 13px/1.3 Monaco, monospace;

	$background-code : #1d1f21;
	$current-line-code : #282a2e;
	$selection-code : #373b41;
	$foreground-code : #c5c8c6;
	$comment-code : #969896;
	$red-code : #cc6666;
	$orange-code : #de935f;
	$yellow-code : #f0c674;
	$green-code : #b5bd68;
	$aqua-code : #8abeb7;
	$blue-code : #81a2be;
	$purple-code : #b294bb;



// Extensions ========================================================================
  %no-select {
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  %no-drag {
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    user-drag: none;
  }
  %no-tap {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
    tap-highlight-color: rgba(0,0,0,0);
    touch-callout: none;
  }
  %psuedo {
  	position: absolute;
    display: block;
		content: '';
  }



// Normalize =========================================================================
	button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}



// Reset =============================================================================
	* {
		&, &:before, &:after {
			box-sizing: inherit;
			margin: 0;
			padding: 0;
	    -webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
	    font-smoothing: antialiased;
	    text-rendering: optimizeLegibility;
		}
	}



// Base ==============================================================================
	html {
		box-sizing: border-box;
	  font-family: sans-serif;
	  font-display: swap;
	}

	body {
		font: $sans-serif;
		background: $lightgray;
		padding: 10px 0;

		@media (min-width: $mega) { padding: 40px 20px; }
	}

	h1 {
		cursor: default;
		font-size: 40px;
		font-weight: 400;
		line-height: .95;
		margin: 0;
	}
	h2 {
		font-weight: 400;
		font-size: 25px;
		line-height: 1;
	}
	h3 {
		font-weight: 400;
		font-size: 20px;

		.implementation-box & {
			margin-top: 20px;
		}

		code {
			font-size: 16px;
			border-bottom: 1px solid $gray;
		}
	}
	a {
		color: inherit;
		text-decoration: none;
	}
	p {
		font-size: 18px;
		margin-top: 10px;

		code {
			font-size: 14px;
			border-bottom: 1px solid $gray;
		}

		a {
			font-weight: 500;
			color: $blue;
			border-bottom: 1px solid;

			&:hover {
				color: shade($blue, 20%);
				background: $lightblue;
			}
			&:active {
				color: shade($blue, 50%);
			}
		}
	}

	hr {
		display: block;
		content: '';
		border: 0;
		border-top: 1px solid mix($lightgray, $black, 80%);
		width: 100px;
		text-align: left;
		margin: 10px 0;
	}

	figure, figcaption {
		margin: 0;
		padding: 0;
	}



// Structure =========================================================================
	.wrapper, .container {
		position: relative;
		margin: 0 auto;
	}
	.container {
		display: block;
		padding: 20px;
	}



// Header ============================================================================
	header {
		h2 {
			margin: 10px 0;

			a {
				font-size: 15px;
				font-weight: 500;
				color: $blue;
				border-bottom: 1px solid;
				margin-left: 10px;
				vertical-align: middle;
				cursor: pointer;

				&:hover {
					color: shade($blue, 20%);
					background: $lightblue;
				}
				&:active {
					color: shade($blue, 50%);
				}
			}
		}

		hr { margin: 20px 0; }

		[data-label]:before {
			@extend %no-select;
			display: inline-block;
			font-size: 13px;
			margin-right: 5px;
			font-weight: bold;
			text-transform: uppercase;
			cursor: default;
			content: attr(data-label);
			color: mix($black, $lightgray);
		}
	}

	.example {
		@extend %no-select;

		width: 140px;
		float: left;
		background: $white;
		border-radius: $radius;
		box-shadow: $shadow;
		padding: 10px;
		font-size: 14px;
		line-height: 1.1;
		margin: 0 20px 5px 0;
		cursor: default;

		img {
			@extend %no-drag;
			cursor: -webkit-zoom-in;
			cursor: zoom-in;

			&:hover {
				opacity: .6;
			}
		}

		figcaption {
			margin-top: 5px;
		}
	}



// Box ===============================================================================
	.grid {
		margin: 0 5px;

		@media (min-width: $tablet) {
			margin: 0 10px;
		}
	}

	.grid-item, .grid-sizer {
		display: block;
		width: 100%;

		@media (min-width: $tablet) { width: 50%; }
		@media (orientation: landscape) and (max-width: $tablet) { width: 50%; }
		@media (min-width: $desktop) { width: 33.33%; }
	}

	.box {
		margin: 5px;
		background: $white;
		border-radius: $radius;
		overflow: hidden;
		box-shadow: $shadow;

		@media (min-width: $tablet) { margin: 10px; }
	}



// Title -----------------------------------------------------------------------------
	.title {
		padding-bottom: 0;

		h2 {
			[data-name] {
				display: inline-block;;
				cursor: pointer;

				&:before { content: attr(data-name); }

				&:hover {
					color: $blue;
					text-transform: lowercase;

					&:before { content: attr(href); }
				}
			}

			.created-by {
				display: inline-block;
				font-size: 16px;
				float: right;
				line-height: 25px;

				&:before {
					font-style: italic;
					content: "Idea from ";
				}

				&:hover { text-decoration: underline; }
			}
		}
	}



// Image -----------------------------------------------------------------------------
	.preview {
		margin: 10px 20px 20px;

		img {
			width: 100%;
			vertical-align: top;
			opacity: 0;
		}
	}



// Warning ---------------------------------------------------------------------------
	.warning {
		@extend %no-select;
		display: block;
		font: $monospace;
		background: $background-code;
		color: $comment-code;
		padding: 20px 20px 0;
		cursor: default;
	}

	$effect_array :
	  'pencil' '(filter: invert(1)) and (background-blend-mode: difference)',
	  'watercolor' '(filter: blur(2px)) and (mix-blend-mode: multiply)',
	  'emboss' '(filter: blur(2px)) and (mix-blend-mode: multiply)',
	  'colored-pencil' '(filter: invert(1)) and (mix-blend-mode: color)',
	  'chalkboard' '(filter: grayscale(1)) and (background-blend-mode: difference)',
	  'colored-chalkboard' '(filter: brightness(2)) and (background-blend-mode: color, difference)',
	  'glow' '(filter: brightness(.5) blur(5px)) and (mix-blend-mode: color-dodge)',
	  'hallucination' '(mix-blend-mode: multiply)',
	  'airbrush' '(filter: blur(5px) contrast(10)) and (mix-blend-mode: multiply)',
	  'flannel' '(background-blend-mode: overlay)',
	  'low-ink-x' '(background-blend-mode: screen, overlay)',
	  'low-ink-y' '(background-blend-mode: screen, overlay)',
	  'collage' '(background-blend-mode: overlay)',
	  'mosaic' '(background-blend-mode: overlay)',
	  'infrared' '(filter: invert(1))',
	  // 'photo-border' '',
	  'night-vision' '(background-blend-mode: overlay)',
	  'warhol' '(background-blend-mode: color)',
	  'selective-color' '(filter: brightness(3)) and (mix-blend-mode: color)',
	  'mirror-x' '(transform: scaleX(-1))',
	  'mirror-y' '(transform: scaleX(-1))';

	@each $name, $requirement in $effect_array {
	  .#{$name}-effect + .warning {
	    @supports #{$requirement} {
	      display: none;
	    }
	  }
	}


// Support list ----------------------------------------------------------------------
	.support {
		padding: 12px 0;
		list-style: none;
	}

	%tab {
		&:before {
			white-space: pre;
			content: "  ";
		}
	}

	$properties_array :
		'filter' '(filter: invert(1))',
		'background-blend-mode' '(background-blend-mode: multiply)',
		'background-blend-mode-color' '(background-blend-mode: color)',
		'background-blend-mode-difference' '(background-blend-mode: difference)',
		'mix-blend-mode' '(mix-blend-mode: multiply)',
		'mix-blend-mode-color' '(mix-blend-mode: color)',
		'transform' '(transform: scaleX(-1))',
		'clip-path' '(clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%))';

	@each $name, $test in $properties_array {
	  .#{$name} {
	  	@extend %tab;
	    @supports #{$test} {
	    	display: none;
	    }
	  }
	}



// Code Output -----------------------------------------------------------------------
	.output {
		background: $background-code;

		.implementation-box & {
			font-size: 14px;
			border-radius: $radius;
			box-shadow: $shadow;
			white-space: normal;
			margin: 10px 0;
			cursor: text;

		}
	}

	.scss, .css {
		display: none;

		code {
			display: block;
			font: $monospace;
			color: $foreground-code;
			white-space: pre-wrap;
			-o-tab-size: 2;
			-moz-tab-size: 2;
			-ms-tab-size: 2;
			tab-size: 2;
		}
	}

	.showing-css .css,
	.showing-scss .scss {
		display: block;
	}

	.selector, .parent, .class, .psuedo-element, .tag {
		color: $red-code;
	}
	.variable, .url, .number {
		color: $orange-code;
	}
	.property, .attribute {
		color: $yellow-code;
	}
	.rule, .keyword {
		color: $purple-code;
	}
	.punctuation, .function, .operator, .string, .atrule, .output {
		color: $foreground-code;
	}



// Options ---------------------------------------------------------------------------
	.options {
		@extend %no-select;

		display: flex;
		font: $sans-serif;
		font-size: smaller;
		text-align: left;
		white-space: nowrap;
		padding: 0 10px 10px;
		background: $background-code;

		a {
			@extend %no-tap;

			display: inline-block;
			flex: 1 0 auto;
			text-align: center;
			padding: 10px 8px;
			background: mix($white, $black, 20%);
			margin: 0 0 0 5px;
			border-radius: $radius;
			box-shadow: $shadow;
			cursor: pointer;
			white-space: normal;
			color: $white;
			transition: background $transition*2;

			&:first-child { margin: 0; }

			&.on { background: mix($white, $black, 40%); }

			&.css-toggle {
				border-radius: $radius 0 0 $radius;

				// @supports (clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%)) {
				// 	clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
				// }
			}
			&.scss-toggle {
				border-radius: 0 $radius $radius 0;
				margin-left: 1px;

				// @supports (clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%)) {
				// 	clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
				// 	margin-left: -8px;
				// }
			}

			&.copy { width: 5em; }

			&:hover {
				transition-duration: $transition;
				background: mix($white, $black, 40%);
			}
			&:active {
				transition-duration: 0s;
				background: $black;
			}
		}
	}

	.icon {
		width: .9em;
		height: .9em;
		margin-right: .5em;
		vertical-align: middle;
	}


// Buttons ===========================================================================
	.implementation-box {
		h2, h3, p {
			@extend %no-select;
			cursor: default;
		}
	}

	.share-box,
	.follow-box,
	.suggestion-box {
		@extend %no-select;
		cursor: default;
	}

	.share {
		display: inline-block;
		margin-right: 10px;
	}

	.share-button, .shares {
		@extend %no-select;
		@extend %no-drag;
		display: inline-block;
		border-radius: $radius;
		font-size: 16px;
		line-height: 1;
		text-decoration: none;
		box-shadow: $shadow;
		padding: 10px 12px;
		background: $white;
		margin-top: 5px;
		transition:
			background $transition,
			color $transition;
	}

	.share-button {
		cursor: pointer;

		&:hover {
			transition-duration: $transition/2;
			box-shadow: $shadow-hover;
			color: $white;
		}

		&:active {
			transition-duration: 0s;
			color: rgba($white, .4);
			box-shadow: inset $shadow;
		}

		.icon {
			display: inline-block;
			width: 16px;
			height: 16px;
			vertical-align: middle;
			margin-right: 10px;
		}
	}

	.twitter {
		&:hover { background: $twitter; }
		&:active { background: shade($twitter, 50%); }
	}
	.facebook {
		&:hover { background: $facebook; }
		&:active { background: shade($facebook, 50%); }
	}

	.shares {
		background: mix($white, $lightgray);
		cursor: default;
		margin-left: 5px;
	}

	.suggestion-box {
		p {
			font-size: 17px;
		}
	}



// Footer ============================================================================
	footer {
		@extend %no-select;

		ul {
			margin: 15px 0;
			list-style: none;
		}

		li {
			&:hover {
				color: $blue;

				span {
					background: $lightblue;
				}

				& + hr {
					border-color: $blue;
				}
			}
			&:active {
				color: shade($blue, 50%);
			}
		}

		a {
			@extend %no-tap;
			display: block;
			line-height: 1.1;
		}

		small {
			display: block;
			cursor: default;
			font-size: 1em;
			margin-top: 10px;
		}
	}


// Advertisment ======================================================================
	.ad-box:hover .box {
		box-shadow: $shadow-hover;
	}

	.ad-box .box {
		background: $background-code;
	}

	#carbonads {
	  display: block;
	  overflow: hidden;
	  cursor: pointer;

	  span {
		  position: relative;
		  display: block;
		  overflow: hidden;
		}
	}

	.carbon-img {
	  float: left;
	  margin-right: 1rem;

	  img {
	    display: block;
	    border-radius: $radius;
	    background: rgba($black, .1);
	  }
	}

	.carbon-text {
	  font: 13px/1.3 Monaco, monospace;
	  float: left;
	  width: calc(100% - 150px);
	  text-align: left;
	  color: $blue-code;
	  text-decoration: none;
	  cursor: pointer;

		&:active {
			color: $foreground-code;
		}

	  #carbonads:hover & {
			color: $yellow-code;
	  }
	}

	.carbon-poweredby {
	  position: absolute;
	  right: 0;
	  bottom: 0;
	  display: block;
	  font: 11px/1 Monaco, monospace;
	  color: $comment-code;
	  text-decoration: none;

	  &:before { content: "/* "; }
	  &:after { content: " */"; }
	}



// Effects ===========================================================================
	@import 'all.scss';



