/*

Panel

	Useful for displaying login credentials. Use with _grid.scss
	for positioning.

	Usage:
	<div class="Panel w-100">
		<h3 class="Panel__heading">File Upload</h3>
		<div class="Panel__tags">
			<span class="Tag Tag--blue">Shell</span>
			<span class="Tag Tag--blue">SFTP</span>
			<span class="Tag Tag--blue">FTP</span>
		</div>
		<div class="m-bottom-2">
			<span class="Panel__label">User</span>
			<span class="Panel__code"><code>example</code></span>
		</div>
		<div class="m-bottom-4">
			<span class="Panel__label">Server</span>
			<span class="Panel__code"><code>example.server.com</code></span>
		</div>
		<a role="button" href="#" class="Button Button--text t-2">Call to action</a>
	</div>

*/

.Panel,
.Panel--double {
	padding: 2rem;
	background: $c-w100;
	> *:last-child {
		&:not(input) {
			&:not(textarea) {
				margin-bottom: 0;
			}
		}
	}
	background: $c-g100;
	display: inline-block;
	position: relative;
	border-radius: $border-radius;
}

.Panel__tags {
	position: absolute;
}

.Panel .Panel__tags {
	top: 2.2rem;
	right: 2rem;
}

.Panel--double .Panel__tags {
	top: 0.5rem;
	right: 0;
}

.Panel__label {
	font-size: $t-1;
	line-height: $t-h-1;
	display: inline-block;
	min-width: 5rem;
	font-weight: $t-bold;
}

.Panel__code {
	display: inline-block;
}

.Panel__section {
	display: block;
	position: relative;
	margin-bottom: 2.5rem;

	@media (min-width: $large-breakpoint) {
		display: inline-block;
		width: 50%;
		margin-bottom: 0;

		& + & {
			margin-left: 1.5rem;
			width: 45%;
		}
	}
}