@import '../definitions/variables';

.b {

	/** Headlines **/
	&-headline {
		&-l1,
		&-l2 {
			display: none;
			margin: 3em 0 2em;

			@include greater($size-l) {
				display: block;
			}

			&:first-child {
				margin-top: 0;
			}
		}

		&-l1 {
			font-size: 1.8em;

			& + .b-headline-l2 {
				color: lighten($text, 20);
				font-size: 1.1em;
				margin-top: -2.8em;
			}
		}

		&-l2 {
			font-size: 1.4em;
		}
	}


	/** Forms **/
	&-form {
		margin: 1em;
		overflow: hidden;

		@include greater($size-m) {
			width: 90%;
			max-width: 46em;
			margin: 4em auto;
		}


		&-label {
			display: block;
			color: lighten($text, 10);
			font-size: 14px;
			margin: 1em 0 0;
			padding: 4px 0;
		}

		&-input,
		&-select-wrap,
		&-checkbox-wrap {
			appearance: none;
			display: block;
			width: 100%;
			padding: 9px;
			border: 1px solid lighten($background-box, 2);
			outline: none;
			background: lighten($background-box, 2);

			&--error {
				border-color: $red;
				background: lighten($red, 35);
			}

			& + .b-form-label {
				margin-top: 1.4em;
			}
		}

		&-select-wrap {
			border: none;
		}

		&-select {
			display: block;
			width: 100%;
			font: inherit;
			border: none;
			outline: none;
			background: transparent;
			-webkit-appearance:none;
		}

		&-error {
			display: block;
			margin: 0.4em 9px 1.2em;
			color: $red;
			font-size: 0.8em;
			max-width: 40em;
		}
		&-info {
			display: block;
			margin: 0.4em 9px 1.2em;
			color: lighten($text, 20);
			font-size: 0.8em;
			max-width: 40em;
		}

		&-buttons {
			margin-top: 40px;
			overflow: hidden;
		}
		&-button {
			& + & {
				margin-top: 1em;

				@include greater($size-l) {
					margin-top: 0;
				}
			}

			&--save {
				@extend .button;

				@extend .button--right-l;
				@extend .button--small-l;
				margin-top: 0;

				@include greater($size-l) {
					margin-left: 10px;
				}
			}
			&--cancel {
				@extend .button;
				@extend .button--text;

				opacity: 0.6;

				@extend .button--right-l;
				@extend .button--small-l;
				margin-top: 0;
			}
			&--remove,
			&--hide,
			&--unhide {
				@extend .button;
				@extend .button--secondary;

				opacity: 0.8;

				@extend .button--left-l;
				@extend .button--small-l;
				margin-top: 0;
			}
			&--unhide {
				opacity: 0.8;
			}
			&--remove {
				@extend .button--destructive;
				margin-top: 0;
			}
		}
	}


	/** Loader **/
	&-loader {
		position: relative;
		min-height: 100px;

		&:before,
		&:after {
			display: none;
			position: absolute;
		}

		&.loading:before,
		&.loading:after {
			display: block;
		}

		&:before {
			content: '';
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba($background-copy, 0.2);
			z-index: 15;
		}
		&--light:before {
			background: rgba($background, 0.4);
		}
		&--nobg:before {
			background: transparent;
		}

		&:after {
			content: '\e809';
			top: 50%;
			left: 50%;
			margin: -25px 0 0 -20px;
			width: 40px;
			height: 40px;
			z-index: 16;

			@extend [class^="icon-"]:before;
			font-size: 2.5em;
			color: rgba($background-copy, 0.6);
			animation:spin 1s linear infinite;
		}
	}


	/** Empty Message **/
	&-empty-message {
		background: lighten($background-box, 4);
		padding: 4em 2em;
		text-align: center;
		color: lighten($text, 30);
	}


	/** Danger Zone **/
	&-danger {
		margin: 4em 0 1em;
		padding: 1em;
		border: 0.1em solid $red;

		@extend .b-loader;
		@extend .b-loader--light;

		& + & {
			margin-top: 1em;
		}

		&__headline {
			margin: 0 0 0.2em;
			color: lighten($text, 10);
			font-size: 1.2em;
		}
		&__message {
			color: rgba($text, 0.6);
			font-size: 0.9em;
		}

		&__button {
			@extend .button;
			@extend .button--destructive;
			margin-top: 15px;
		}
	}



	/** Modal */
	&-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 35;
		background: rgba($background, 0.96);
		transition: background 0.1s ease-out, backdrop-filter 0.1s ease-out 0.1s, max-height 0.3s ease-out;

		@extend .b-loader;
		@extend .b-loader--light;

		@supports (backdrop-filter: grayscale(100%) blur(10px)) {
			background: rgba($background, 0.8);
			backdrop-filter: grayscale(100%) blur(10px);
		}
		&--hidden {
			background: rgba($background, 0);
			transition: background 0.3s ease-in 0.1s, backdrop-filter 0.1s ease-out 0.1s;

			@supports (backdrop-filter: grayscale(100%) blur(10px)) {
				backdrop-filter: grayscale(0%);
			}
		}

		&__content {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 90%;
			max-width: 800px;
			max-height: 100%;
			margin: 0;
			padding: 5% 0 2em 0;
			overflow: scroll;
			-webkit-overflow-scrolling: touch;

			opacity: 1;
			transform: translate3d(-50%, -50%, 0);
			transition: opacity 0.3s ease-out, transform 0.15s ease-out;

			@include greater($size-m) {
				width: 90%;
				max-width: 46em;
				margin: 0 auto;
				padding-right: 1em;
			}

            &--fullscreen {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: auto;
                max-width: none;
                max-height: none;
                padding: 0;
                transform: translate3d(0, 0, 0);
                transition: opacity 0.3s ease-out;

                @include greater($size-m) {
                    width: auto;
                    max-width: none;
                    padding: 0;
                }
            }
		}
		&--hidden &__content {
			opacity: 0;
			transform: translate3d(-50%, -45%, 0);
			transition: opacity 0.1s ease-out, transform 0s ease-out 0.3s;
		}

		&.loading &__content {
			opacity: 0.6;
			pointer-events: none;
		}

		& .b-headline {
			&-l1,
			&-l2 {
				display: block;
				margin: 3em 0 2em;

				&:first-child {
					margin-top: 0;
				}
			}

			&-l1 {
				font-size: 1.4em;

				@include greater($size-l) {
					font-size: 1.8em;
				}

				& + .b-headline-l2 {
					color: lighten($text, 20);
					font-size: 1.1em;
					margin-top: -2.4em;

					@include greater($size-l) {
						margin-top: -2.8em;
					}
				}
			}

			&-l2 {
				font-size: 1.2em;

				@include greater($size-l) {
					font-size: 1.4em;
				}
			}
		}
	}

	&-dl {
		font-size: 0.8em;
		padding: 0.5em 0 0;

		dt {
			@extend .b-dt;
		}
		dd {
			@extend .b-dd;
		}
	}
	&-dt {
		float: left;
		text-align: right;
		width: 9em;
		padding: 0.5em 0;
	}
	&-dd {
		padding: 0.5em 0 0.5em 10.5em;

		a:link,
		a:visited {
			color: inherit;
		}
	}
}