@import 'toast/_grid';
@import '_config';

body {
	background-color: $background-color;
	@if variable-exists(background-image) {
		background-image: $background-image;
		background-repeat: repeat;
		background-attachment: fixed;
	}
	color: $primary-color;
	font-family: $font-stack;
	font-size: $base-font-size;
	line-height: $line-height;
}

hr {
	color: $background-color;
	border-color: $background-color;
	border-top: 1px solid $background-color;
	border-bottom: 1px solid $background-color;
	margin: 0px;
}

a {
	text-decoration: none;
	color: $link-color;

	&:hover {
		text-decoration: underline;
		color: $link-hover-color;
	}

	&:visited {
		color: $link-visited-color;

		&:hover {
			color: $link-hover-color;
		}
	}

	&:active {
		color: $link-active-color;
	}
}

.task-list {
	padding-left: 0px;
	list-style-type: none;
}

.shadow {
	color: $background-color;
}

article {
	@extend .section	
}

.section {
	border: $section-border-width;
	border-style: solid;
	border-color: $section-border-color;
	margin-bottom: $section-gap;
}

.section-header {
	background-color: $section-header-background;

	h2 {
		font-size: $header-font-size;
		font-weight: normal;
		margin: 0px;
	}

}

.section-caption {
	color: $alt-color;
}

.section-title {
	padding: $section-header-padding;
}

.section-body {
	padding: $section-body-padding;
}

.about {
	margin-top: $page-margin;
	margin-right: $section-border-width;
	margin-left: $section-border-width;
}

.entries {
	border-color: transparent;
}

.about-section-title {

	h1 {
		font-size: $header-font-size;
		margin: 0px;
	}
}

.about-section-body {
	background-color: $about-section-body;
	hr {
		color: $hr-color;
		border-color: $hr-color;
		border-top: 1px solid $hr-color;
		border-bottom: 1px solid $hr-color;	
	}
}

.about-footer {
	background: $section-footer-background;
	color: $section-footer-color;
	padding: $entry-footer-padding;
	font-size: $alt-font-size;
}

.footer {
	border-width: $footer-border;
	border-style: solid;
	border-color: $footer-border-color;
}

.strong {
	font-weight: bold;
}

.entry-body {
	background-color: $section-body-background;

	pre {

		white-space: pre-wrap;
		overflow: auto;
		background-color: $section-body-background-alt;
		color: $primary-color;
		border: 1px solid $background-color;
		padding: 8px;
	}

	p {
		code {
			background-color: $section-body-background-alt;
			color: $primary-color;
			border: 1px solid $background-color;
			display: inline-block;
			padding: 0px 2px;
		}
	}

	table {
		border: $section-border-width / 2 solid $background-color;
		border-spacing: 0px;
		width: 100%;

		th {
			background-color: $section-footer-background;
			color: $primary-color;
		}
		td {
			padding: $section-body-padding;
		}
	}
}

.entry-meta {
	text-align: right;
	font-size: $alt-font-size;
}

.entry-footer {
	background: $section-footer-background;
	color: $section-footer-color;
	padding: $entry-footer-padding;
	font-size: $alt-font-size;
}

.entry-id {
	text-align: right;
}

.top-navigation {
	text-align: right;
	font-size: $alt-font-size;
	font-weight: normal;

	nav
	{
		p {
			margin: 0px;
		}
	}

	a {
		text-decoration: none;
		color: $alt-color;
	
		&:hover {
			text-decoration: underline;
			color: $alt-color;
		}
	
		&:visited {
			color: $alt-color;
	
			&:hover {
				color: $alt-color;
			}
		}
	
		&:active {
			color: $link-active-color;
		}
	}
}

.bottom-navigation {
	background-color: $section-body-background-alt;
	border: $section-border-width solid $section-border-color;
	text-align: center;
	font-size: $alt-font-size;

	p {
		margin: 0px;
	}

	margin-bottom: $section-gap;
}

.bottom-navigation-title {
	color: $alt-color;
	background-color: $section-header-background;
	
	h2 {
		font-size: $header-font-size;
		margin: 0px;
	}
}

.bottom-navigation-content {

	padding: $navigation-padding;
	margin: $navigation-content-margin;

	p {
		margin: $navigation-content-padding;
	}

	hr {
		margin-top: 8px;
	}
}

.bottom-navigation-footer {
	background: $section-footer-background;
	color: $section-footer-color;
	padding: $entry-footer-padding;
}

.emojione {
	display: inline;
	height: $emoji-line-height;
	vertical-align: text-bottom;
}

.center {
	text-align: center;
}

.blink {
	animation: blink 1s ease-in-out infinite alternate;
	color: $blink-color;
}
@keyframes blink { to { opacity: 0; } }

.meta-shift {
	@media (max-width: $toast-breakpoint-medium) {
		text-align: left;
	}

	@media (max-width: $toast-breakpoint-medium) and (min-width: $toast-breakpoint-small) {
		&[class*="#{$toast-grid-column-namespace}--m-"] {
			text-align: right;
		}
	}
}