@charset "UTF-8";
// Morten Mitchell Larød 2019

@import 'vars';

* {
	box-sizing: border-box;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    -moz-font-feature-settings: "liga", "kern";
	-moz-font-feature-settings:"liga=1, kern=1";
	-ms-font-feature-settings:"liga", "kern";
	-o-font-feature-settings:"liga", "kern";
	-webkit-font-feature-settings:"liga", "kern";
	font-feature-settings: "liga", "kern";
	-webkit-font-smoothing: auto;
}
a { color: $link; text-decoration: none;}
a:visited { color: $link; }
a:hover { color: $link-hover; text-decoration: underline; }
a:focus { outline: thin dotted;}
a:hover, a:active { outline: 0; }

img, object, embed, video { max-width: 100%; }

figcaption {font-weight: normal; }

::-webkit-input-placeholder { color: $fc-dark-medium; }
::-moz-placeholder { color: $fc-dark-medium; } 
:-ms-input-placeholder { color: $fc-dark-medium; }
input:-moz-placeholder { color: $fc-dark-medium; }

.prototype-label {
	display: none;
	position: absolute;
    right: 0;
    padding: 4px 8px;
    top: 0;
	@include subtitle-2;
	color: $fc-dark-medium;
}
body {
	@include body;
	background-color: $c-neutral-light;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	height: 100%;
	position: relative;
}

html {
    height: 100%;
}
.hidden {
	visibility: hidden !important;
}
.hide {
	display: none;
}
iframe {
	border: none;
	max-height: 90vh;
	width: 100%;
}
button,
.button {
	outline: none;
	display: inline-block;
    text-align: center;
    cursor: pointer;
    border: none;
	background-color: transparent;
    border-radius: 4px;
	transition: all .2s ease-in-out;
	padding: 0 $gap-default;
	@include subtitle;
	cursor: pointer;
	i {
		margin-left: $gap-small;
	}
}

.primary-btn {
	background-color: $c-primary;
	border: 2px solid $c-primary;
    color: $c-white;
	&:hover {
	    background-color: $c-primary-dark;
	}
	&:active {
	    border: 2px solid $sky-blue-300;
	}
	&:disabled {
		border: 2px solid $warm-grey-600;
		background-color: $warm-grey-600;
    }
}
.outline-btn {
	border: 1px solid $warm-grey-400;
	color: $soft-black;
	background-color: $c-white;
	&:hover {
	    background-color: $warm-grey-300;
	}
	&:active {
	    background-color: $warm-grey-400 ;
	}
	&:disabled {
		border: 1px solid $warm-grey-200 !important;
		background-color: $warm-grey-200 !important;
		color: $warm-grey-600 !important;
    }
}
.link-btn {
    color: $c-primary;
	&:hover {
	    color: $c-primary-dark;
	}
	&:active {
	    color: $c-primary-dark;
	}
}

.small-btn {
	height: 29px;
	line-height: 27px;
}
.medium-btn {
	height: 39px;
	line-height: 37px;
}
.large-btn {
	height: 47px;
	line-height: 45px;
}

.image-toggle,
.density-toggle {
	width: 130px;
}


.tool-btn {
	@include subtitle-2;
	padding: $gap-small;
	transition: all .2s ease-in-out;
	border-radius: 0;
	color: $sky-blue-700;
	&:hover {
		color: $sky-blue-900;
		background-color: rgba(255,255,255,.5);
	}
}

.button-group-container {
	display: flex;
	flex-direction: column;
	width: fit-content;
	label {
		font-size: 12px;
		color: $light-grey-700;
		text-align: center;
	}
}
.button-group {
	display: flex;
	button,
	.button {
		width: auto;
		border-width: 1px;
		border-radius: 4px;
		color: $warm-grey-600;
		font-weight: 400;
		i {
			margin-left: 0;
			font-size: 15px;
    		line-height: 2;
		}
		border-radius: 0;
		border-right-width: 0;
		&.active {
			background-color: $sky-blue-100;
			color: $sky-blue-700;
			&:hover {
				background-color: $sky-blue-200;
			}
		}
		&:first-of-type {
			border-radius: 4px 0 0 4px;
		}
		&:last-of-type {
			border-radius: 0 4px 4px 0;
			border-right-width: 1px;
		}
	}
}
.button-group-2 {
	display: flex;
	button,
	.button {
		width: auto;
		border-width: 1px;
		border-radius: 4px;
		color: $warm-grey-600;
		border-color: $warm-grey-500;
		font-weight: 400;
		i {
			margin-left: 0;
			font-size: 15px;
    		line-height: 2;
		}
		border-radius: 0;
		border-right-width: 0;
		&:hover {
			background-color: $warm-grey-300;
		}
		&.active {
			background-color: $sky-blue-200;
			color: $sky-blue-800;
			&:hover {
				background-color: $sky-blue-300;
			}
		}
		&:first-of-type {
			border-radius: 4px 0 0 4px;
		}
		&:last-of-type {
			border-radius: 0 4px 4px 0;
			border-right-width: 1px;
		}
	}
}

.page-header {
	background-color: $c-white;
	border-bottom: 1px solid $c-neutral;
	.header-grid-main {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.header-grid-aside {
		display: flex;
		justify-content: flex-end;
		.publish-undo {
			display: flex;
			align-items: center;
			padding-right: $gap-large;
		}
	}
}
.notification-box {
	position: absolute;
	bottom: 24px;
	left: 50%;
    width: 75%;
	margin: 0 0 0 -37.5%;
    text-align: center;
	z-index: 999999;
	p {
		background-color: $black;
		width: max-content;
		text-align: center;
		border-radius: 4px;
		padding: 12px 40px;
		color: $c-white;
		display: table;
		margin: $gap-default auto 0;
		box-shadow: $elevation-04;
		-webkit-font-smoothing: antialiased;
		&.success {
			background-color: $sea-green-700;
		}
		&.error {
			background-color: $letterpress-red-900 ;
		}
		button {
			margin-left: $gap-default;
			padding: $gap-tiny -2 $gap-default -2;
			background-color: $sky-blue-700;
			color: $c-white;
			border: 2px solid $sky-blue-700;
			font-weight: normal;
			&:hover {
				background-color: $c-primary-dark;
			}
			&:active {
				border: 2px solid $sky-blue-300;
			}
		}
	}
}

.layout-toggles {
	padding-right: $gap-large;
	display: flex;
    align-items: center;
}
#main {
	//margin: $gap-medium $gap-default 0 94px;
	position: relative;
}
aside {
	display: none;
	height: 100vh;
	background-color: $c-white;
	border-left: 1px solid $c-neutral;
	.nav-buttons {
		display: flex;
		margin-bottom: 28px;
		button {
			width: 33.33%;
			&:not(:first-child) {
				border-width: 1px 1px 1px 0;
			}
			&:first-child {
				border-radius: 3px 0 0 3px;
			}
			&:last-child {
				border-radius: 0 3px 3px 0;
			}
		}
	}
			
}


.tooltipster-content {
	color: $fc-dark-medium;
	.remove-article,
	.cancle-remove {
		color: $link;
		cursor: pointer;
		&:hover {
			color: $link-hover;
		}
	}
}