@import "../../common";
@import "./Pane";

// .intro-pane {
//
// }

.menu-pane {
	position: relative;
	overflow: hidden;

	& .pane--wrapper {
		position: relative;
	}

	& .pane--header {
		//margin-bottom: 2rem;
		background: $color-red-900;
	}

	z-index: 5001;

	&.pane--is-active {
		z-index: 5010;
	}
}

#intro-unit {
	padding: $menu-padding;

	.menu-button {
		position: absolute;
		margin-top: 0.5rem;
	}

	h1 {
		color: $color-text-on-primary;
		font-size: 1rem;
		margin: 0;
		line-height: 1.1;
		text-transform: uppercase;
		margin-left: 3.25rem;
		margin-top: 0.15rem;

		span {
			display: block;
		}
		b {
			font-weight: 400;
			display: block;
			opacity: 0.5;
		}
	}

	.donate-button {
		position: absolute;
		top: $menu-padding;
		right: $menu-padding;
		padding: 0.5rem 0.5rem 0.5rem 2rem;
		border: 1px solid rgba(255,255,255,0);
		background: transparent;
		color: white;
		opacity: 0.7;
	
		&:hover {
			background: #D32F2F;
			border: 1px solid rgba(255,255,255,0.25);
			opacity: 1;
		}

		img {
			width: 16px;
			position: absolute;
			top: 5px;
			left: 5px;
		}
	}
}
