$padding-width: 70px;

body {
	@include open-sans;
	color: $black;
	background-color: $bg-primary;
	font-size: 14px;
}

a {
	text-decoration: none;
	color: $gray-dark;

	&:hover {
		color: $red;
	}
}

p {
	margin-bottom: 10px;
}

strong,
b {
	font-weight: bold;
}

em,
i {
	font-style: italic;
}

// https://gist.github.com/unruthless/413930
sub,
sup {
	/* Specified in % so that the sup/sup is the
     right size relative to the surrounding text */
	font-size: 75%;

	/* Zero out the line-height so that it doesn't
     interfere with the positioning that follows */
	line-height: 0;

	/* Where the magic happens: makes all browsers position
     the sup/sup properly, relative to the surrounding text */
	position: relative;

	/* Note that if you're using Eric Meyer's reset.css, this
     is already set and you can remove this rule */
	vertical-align: baseline;
}

sup {
	/* Move the superscripted text up */
	top: -0.5em;
}

sub {
	/* Move the subscripted text down, but only
     half as far down as the superscript moved up */
	bottom: -0.25em;
}

h2,
.heading-large {
	@include heading-large;
}

h3,
.heading-medium {
	@include heading-medium;
}

h4,
.heading-small {
	@include heading-small;
}

.text-default {
	@include text-default;
}

.text-cta {
	@include text-cta;
}

.text-description {
	@include text-description;
}

.text-meta {
	@include text-meta;
}

header {
	margin-bottom: 40px;

	h2,
	h3,
	h4 {
		margin-bottom: 10px;
	}
}

#container {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
}

#content {
	position: relative;
}

.main {
	@include microfix;
	@include box-shadow;
	background-color: #fff;
	padding: 30px;
	margin: 0 30px;
	position: relative;
	width: 100%;
	max-width: $max-width;
	min-height: 250px;
	z-index: $z-low;
}

.width-wrapper {
	@include microfix;
	@include width-wrapper;
}

.draggable {
	position: relative;
	padding: 10px 0;
	background-color: $white;
	transition: box-shadow 200ms;

	&:before {
		cursor: move;
		content: "";
		background-color: #c0c0c0;
		// border-right: 12px solid white; // solidifies gap from parent
		display: block;
		width: 13px;
		height: calc(100% + 2px);
		position: absolute;
		top: -1px;
		left: -6px;
		transition: background-color 100ms;
	}

	&:after {
		cursor: move;
		text-shadow: $black 0px 1px 1px;
		content: "┋";
		color: $gray-light;
		font-size: 24px;
		position: relative;
		top: 10px;
		left: -2.65rem;
		transform: translateY(-50%);
	}

	&:active {
		@include box-shadow;
	}

	&:hover {
		&:before {
			background-color: $gray;
		}
	}
}

svg {
	width: 100%;

	.bar {
		fill: $red;
	}

	.type {
		fill: #000;
	}
}

polygon.bar {
	fill: $red;
}
