/*------------------------------------*\
    $PATTERN LAB-SPECIFIC STYLES
\*------------------------------------*/
/**
 * This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab.
 * This is helpful for displaying demo styles for grids, animations, color swatches, etc
 * It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements
 * These styles will not be your production CSS.
 */
.demo-animate {
	background: #ddd;
	padding: 1em;
	margin-bottom: 1em;
	text-align: center;
	border-radius: 8px;
	cursor: pointer;
}

.sg-label {
	font-size: 90%;
	line-height: 1;
}

.sg-fonts p {
	margin-bottom: 0.3em;
}

.pl-c-main {
	.pl-c-category {
		&__title {
			background: rgba(255, 255, 255, .5);
			border: 2px dotted #008FD6;
			font-size: 2.4rem !important;
			padding: 6px 6px 4px;
			margin: 24px 0;
			text-transform: uppercase;
		}

		&__title-link {
			border-bottom-color: transparent;

			&:focus,
			&:hover {
				border-bottom-color: #0062BA;
			}
		}
	}

	.pl-c-pattern {
		&__title {
			font-family: "DIN-Bold";
			font-size: 1.4rem!important;
			line-height: 1.5!important;
			font-weight: 700!important;
			text-transform: uppercase!important;
		}

		&__title-link {
			border-bottom-color: transparent;

			&:focus,
			&:hover {
				border-bottom-color: #0062BA;
			}
		}
	}
}