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

@import 'vars';

.article-list { 
	&.tool-on-top,
	&.other,
	&.algorithm,
	&.wysiwyg,
	&.wysiwyg {
		header { 
			margin-bottom: $gap-small;
			.tool {
				float: right;
			}
			span {
				display: inline-block;
				padding: $gap-tiny 0;
			}
			.filters {
				display: inline-block;
				button {
					&.active {
						font-weight: 700;
						color: $fc-dark;
					}
				}
			}
			&:after {
				content: "";
				display: table;
				clear: both;
			}
		}
	}


	&.tool-on-top,
	&.latest-articles,
	&.other {
		li.article {
			&:hover .teaser-content {
				//transition: border .23s ease-in .23s;
				//border: 2px solid $sky-blue-400;
				.tools {
					//transition: opacity .2s ease-in .2s;
					//opacity: 1 !important;
					//z-index: 2;
				}
			}
		}
	} 
	&.tool-on-top,
	&.latest-articles,
	&.other {
		li.article {
			.teaser-content {
				&:before {
					content: "";
					position: absolute;
					width: 100%;
					height: 100%;
					border: 2px solid transparent;
					border-radius: 4px;
					margin: -2px;
				}
			}
		}
	}
	&.tool-on-top,
	&.latest-articles,
	&.other {
		li.article { 
				.article-container:hover {
					.teaser-content:before {
						transition: .2s ease-in .2s;
						content: "";
						position: absolute;
						width: 100%;
						height: 100%;
						border: 2px solid $sky-blue-400;
						border-radius: 5px;
						margin: -2px;
					}
					.tools {
					transition: opacity .2s ease-in .2s;
					opacity: 1 !important;
					z-index: 2;
				}
			}
		}
	}
	&.tool-on-top,
	&.latest-articles,
	&.other {
		li.article {
			.editable .teaser-content {
				&:before {
					border: 2px solid $c-primary;
				}
			}
			&:hover {
				.editable .teaser-content {
					&:before {
						border: 2px solid $c-primary;
					}
				}
			}
		}
	}


	&.tool-on-top,
	&.other {
		li.article {
			&::before {
				cursor: move;
				position: absolute;
				top: 0;
				left: 0;
				padding: $gap-small 0 0;
			    color: $fc-dark;
			    font-weight: 700;
			    font-size: 15px;
			    width: 36px;
				line-height: 1;
				text-align: center;
				border-bottom: 1px solid $c-neutral;
				z-index: 1;
			}
			&.sortable-chosen {
				article {
					opacity: .6;
					box-shadow: 0px 10px 17px rgba(102, 100, 99, .5);
					.teaser-content {
						cursor: move !important;
					}
				}
			}

			&.sortable-ghost {
				opacity: 1;
				border-top: 2px solid $c-primary !important;
				border-right: 0 !important;
				border-bottom: 0 !important;
				border-left: 0 !important;
				padding: 0 !important;
				&:before {
					display: none;
				}
				article,
				.bundle-info,
				.bundled-articles {
					display: none !important;
				}
			}
		}
	}
	&.tool-on-top,
	&.other {
		li.bundle {
			&::before {
				position: absolute;
				top: 32px;
				left: 4px;
			}
		}
	}
	&.tool-on-top {
		counter-reset: tool-on-top;
		li.article {
			&::before {
			    counter-increment: tool-on-top;
				content: counter(tool-on-top);
			}
		}
		.images-hidden {
			article {
				.img-container {
					display: none !important;
				}
			}
		}
		.images-visible {
			article {
				.img-container {
					display: block !important;
				}
			}
		}
		ol li li.article,
		.b-version .article {
			&::before {
				content: '';
				background-color: transparent;
				border: none;
			}
		}
	}
	&.other {
		.images-hidden {
			article {
				.img-container {
					display: none !important;
				}
			}
		}
		.images-visible {
			article {
				.img-container {
					display: block !important;
				}
			}
		}
		ol li.article:nth-child(1) {
			&::before {
			    content: '1';
			}
		}

		ol li.article:nth-child(2) {
			&::before {
			    content: '2';
			}
		}
		ol li.article:nth-child(3) {
			&::before {
			    content: '3';
			}
		}
		ol li.article:nth-child(4) {
			&::before {
			    content: '4';
			}
		}
		ol li.article:nth-child(5) {
			&::before {
			    content: '5';
			}
		}
		ol li.article:nth-child(6) {
			&::before {
			    content: '6';
			}
		}
		ol li.article.default:nth-child(n+7) {
			/*&::before {
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				-webkit-font-smoothing: antialiased;
				font-family: "Font Awesome 5 Pro";
				font-weight: 900;
				font-size: 16px;
				content: "\f071";
			    color: $c-warning-dark;
			    width: 28px;
			    height: 28px;
			}
			*/
			&:after {
				content: 'There is no room for this teaser in the SP.';
				position: absolute;
				right: 0;
				bottom: 0;
				left: 36px;
				border-radius: 4px;
				padding: 12px 40px;
				box-shadow: $elevation-04;
				display: flex;
				flex-direction: column;
				color: $c-black;
				font-size: 15px;
				background-color: $sand-yellow-400;
				z-index: 1;
				text-align: center;
			}
			.position-lock {
				visibility: hidden;
			}
		}
		ol li.article li.article,
		.b-version .article {
			&::before {
				content: '';
				background-color: transparent;
			}
		}
	}
	&.algorithm {
	
		.nq {
			padding: 8px 16px;
			background: $c-neutral-light;
			border-radius: 3px;
			.img-container {
				&:before {
					display: none;
				}
			}
		}
	}
	&.latest-articles {
		ol {
			li {
				//margin: 2px $gap-default;
			}
		}
		header {
			padding: 0 $gap-large 0 $gap-large;
		}
		h2 {
			padding: $gap-small $gap-default;
		}
		.content {
			padding: 0 $gap-default 0 $gap-default;
		}
		.article {
			.teaser-info {
				display: none;
			}
			.article-container {
				padding: 0;
				min-height: auto;
			}
		} 
		.small-btn {
			margin: 0 0 $gap-default $gap-large;
		}
		.in-use {
			&::before {
				display: none;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				font-size: 16px;
				content: "✔ TOP";
				position: absolute;
			    top: 0;
			    left: 0;
			    color: $c-success;
			    text-align: center;
				width: fit-content;
				height: 24px;
			    white-space: pre; 
				z-index: 2;
				line-height: 28px;
				padding-left: $gap-small;
			}
			&.tp::before {
				content: "✔ TOP";
			}
			&.jm::before {
				content: "✔ OTHER";
			}
			&.b2b::before {
				content: "✔ B2B";
			}
			&.b2c::before {
				content: "✔ B2C";
			}
		}
		/*
		article {
			.text-container {
				padding: 0 $gap-small;
				.titles {
					margin-bottom: 0;
					.main-title {
						cursor: move;
						@include subtitle;
						&:hover {
							background-color: transparent;
						}
					}
					.kicker,
					.deck {
						padding: 0 $gap-default;
						cursor: move;
						&:hover {
							background-color: transparent;
						}
					}
				}
			}	
			.remove,
			.create-bundle {
				display: none;
			}
			.img-container {
			    width: 20%;
			}
			.info {
				margin-top: 0;
			}
			&.no-image {
				.img-container {
					display: none !important;
				}
			}
		}
		*/
		.images-hidden {
			article {
				.img-container {
					display: none !important;
				}
			}
		}
		.images-visible {
			article {
				.img-container  {
					display: block !important;
				}
			}
		}
	}
	.warning-msg,
	.warning-msg2,
	.warning-msg3 {
	    color: $c-warning-dark;
	    font-size: 18px;
	    font-weight: 600;
	    .message {
		    margin: 0 0 $gap-small $gap-tiny;
	    }
	}
	ol.articles {
		padding-top: $gap-small;
		li.article {
			cursor: move;
			position: relative;
			margin: 0 $gap-default $gap-small $gap-default;
			display: flex;
			flex-direction: column;
			//transition: height .2s ease-in-out;
			&.bundle {
				border: 1px solid $sea-green-600;
				box-shadow: $elevation-01;
				background-color: $sea-green-100;
				border-radius: 8px;
				margin: 0px 14px 8px 14px;
				padding: 0 $gap-tiny $gap-tiny;
				.bundle-info {
					display: flex;
					justify-content: flex-end;
					padding: 0 0 0 $gap-large;
					color: $sea-green-500;
				}
				.remove-bundle {
					color: $letterpress-red-900;
					&:hover {
						color: $c-white;
						background-color: $letterpress-red-500;
					}
				}
				.bundled-articles {
					display: block;
					width: calc(100% - 36px);
					margin-left: 36px;
					min-height: 50px;
					li.article {
						margin: $gap-tiny 0;
					}
					&:before {
						content: "DROP BUNDLE TEASER HERE";
						color: $sea-green-800;
						position: absolute;
						bottom: 13px;
						left: 0;
						right: 0;
						text-align: center;
					}
					ol {
						display: none;
					}
				}
			}
			&.dummy {
				margin: 0;
			}
			.bundled-articles {
				display: none;
				ol {
					display: none;
				}
			}
			.warning {
				position: absolute;
				top: 1px;
				right: 1px; 
				bottom: 1px;
				left: 1px;
				border-radius: 2px;
				padding: $gap-large;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: $c-warning-dark;
			    font-size: 18px;
			    font-weight: 600;
			    text-align: center;
			    text-shadow:
				-1px -1px 0 #FFF,
				1px -1px 0 #FFF,
				-1px 1px 0 #FFF,
				1px 1px 0 #FFF;
				background-color: rgba(255,255,255,.8);
				z-index: 1;
			}
		}
	}


	h2 {
		@include headline-5;
	    padding: 0 0 0 $gap-default;
	    margin: 0;
		display: inline-block;
    	span {
	    	font-weight: 400;
	    	font-size: 18px;
		}
	}
	.show-details,
	.hide-details {
		float: right;
		margin: $gap-default $gap-small 0 0;
	}
	.content {
		overflow: auto;
	}
	.search {
		margin-bottom: $gap-default;
		input[type="search"] {
			width: 100%;
		}
		&:after {
			content: "";
			display: table;
			clear: both;
		}
	}
	.sort {
		margin-bottom: $gap-default;
		h3 {
			@include subtitle;
			display: inline-block;
		    padding: 0 0 $gap-small 0;
		    margin: 0;
		}
		.sort-container {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			width: 100%;
			.custom-select {
				width: 200px;
				margin: 0 $gap-default $gap-tiny 0;
			}			
		}
		.show-images,
		.hide-images {
			float: left; 
			width: 205px;
		}
		.reset {
			float: right;
			margin-left: $gap-small;
		}
		&:after {
			content: '';
			display: table;
			clear: both;
		}
	}
	.filter {
		margin-bottom: $gap-default;
		h3 {
			@include subtitle;
			display: inline-block;
		    padding: 0 0 $gap-small 0;
		    margin: 0;
		}
		.filter-container {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 100%;
			margin-bottom: $gap-small;			
		}
		fieldset {
			&.section-filter {
				width: calc(100% - 278px);
			}
			&.nv-filter {
				legend {
					padding-bottom: $gap-default;
				}
			}
			legend {
				font-size: 12px;
				color: $warm-grey-700;
				line-height: 1;
				padding-bottom: $gap-small;
			}
			label.check {
				display: block;
				float: left;
				margin-right: 8px;
				&:last-of-type {
					margin-right: 0;
				}
			}
		}
	}
	.not-qualified {
		font-size: 20px;
		font-weight: 600;
		color: $fc-dark-medium;
		text-transform: uppercase;
		margin-bottom: $gap-small;
	}
	.show-next {
		padding: $gap-small 0 0;
		text-align: right;
	}
	article {
		cursor: move;
		display: flex;
		flex-direction: column;
		position: relative;
		border-radius: 4px;
		background-color: #f5f5f5;
		transition: background-color .2s;
		box-shadow: $elevation-01;
		width: -webkit-fill-available;
		&.editable .teaser-content {
			cursor: default;
			&:before {
				content: "";
				position: absolute;
				width: 100%;
				height: 100%;
				border: 2px solid $c-primary;
				border-radius: 4px;
				margin: -2px;
			}
			&:hover {
				.tools {
					display: none;
				}
			}
		}
	    .article-container {
			display: flex;
			flex: 1;
			min-height: 112px;
		}
		.teaser-content {
			position: relative;
			display: flex;
			width: -webkit-fill-available;
			border-radius: 4px;
			background-color: $c-white;
			
			.img-container {
				position: relative;
				width: 20%;
				padding-bottom: 13.33%; // (16:9 ratio 25% of 56.25 | 3:2 ratio 25% of 66.66)
				margin: $gap-small;
				flex: none;
				background-color: $c-neutral-dark;
				img {
					position: absolute;
					object-fit: cover;
					width: 100%;
					height: 100%;
					max-width: 100%;
				}
			}

			.text-container {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: space-between;
				width: -webkit-fill-available;
				margin: $gap-small $gap-default $gap-small $gap-small;
				.titles {
					display: flex;
					flex-direction: column;
					.streamer {
						background: $c-black;
						text-align: center;
						color: $c-neutral-light;
						font-weight: 700;
						border-bottom: 1px solid $c-neutral-light;
						text-transform: uppercase;
						letter-spacing: 1px;
						font-size: 13px;
						line-height: 1;
						padding: 1px;
						margin-bottom: $gap-tiny;
					}
					.main-title {
						@include headline-5;
						font-weight: 400;
						margin-bottom: $gap-tiny;
					}
					.kicker,
					.deck {
						@include label;
						color: $warm-grey-800;
						margin-bottom: $gap-tiny;
					}
				}
				.meta {
					display: flex;
					flex-direction: column;
					@include label;
					color: $warm-grey-800;
					.level-1,
					.level-2 {
						justify-content: space-between;
						position: relative;
					}
					.level-1 {
						margin-bottom: $gap-tiny;
					}
					div {
						display: flex;
					}
					strong {
						font-weight: 600;
						padding-left: $gap-tiny;
					}
					.top-label {
						display: none;
						font-weight: 700;
						text-transform: uppercase;
						padding-right: $gap-small;
						color: $c-error-dark;
					}
					.article-type,
					.subscription {
						margin-left: $gap-tiny;
						display: none;
						span {
							padding-left: $gap-tiny;
						}
					}
					.article-type {
						&:before {
							content: '•';
							font-weight: normal;
						}
					}
					.subscription {
						font-weight: 600;
					}
					
				}
			}
			ul.tools {
				display: flex;
				justify-content: flex-end;
				align-items: flex-start;
				position: absolute;
				top: -4px;
				right: -4px;
				height: 32px;
				opacity: 0;
				box-sizing: content-box;
				text-transform: capitalize;
				background-color: $c-neutral-darkest;
				border-radius: 4px;
				overflow: hidden;
				li {
					@include subtitle-2;
					height: 32px;
					line-height: 32px;
					padding: 0 $gap-default;
					margin: 0;
					color: $c-white;
					cursor: pointer;
					border-right: 1px solid $c-neutral-darker;
					transition: .2s ease-in;
					&:last-child {
						border-right: 0;
					}
					i {
						margin-right: $gap-tiny;
						font-size: 13px;
						font-weight: normal;
					}
					&.remove {
						color: $c-error-dark;
						&:hover {
							background-color: $c-error-dark;
							color: $c-white;
						}
					}
					&:hover,
					&:focus-within {
						background-color: $c-neutral-darker;
						text-decoration: none;
						outline: transparent;
					}
				}
				li[disabled] { 
					color: rgba(0,0,0,.25);
					background-color: transparent;
					cursor: default;
					&:hover {
						color: rgba(0,0,0,.25);
						background-color: transparent;
						border: none;
					}
				}
			}
		}
		
		.teaser-info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			text-align: center;
			border-radius: 3px 0 0 3px;
			background: rgb(255,255,255);
			background: -moz-linear-gradient(left,  rgb(255,255,255) 0%, rgb(245,245,245) 100%);
			background: -webkit-linear-gradient(left,  rgb(255,255,255) 0%,rgb(245,245,245) 100%);
			background: linear-gradient(to right,  rgb(255,255,255) 0%,rgb(245,245,245) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=1 );
			div {
				display: flex;
				flex-direction: column;
				width: 36px;
			}
			.position-lock {
				height: 50%;
				.locked,
				.unlocked {
					cursor: pointer;
					padding: $gap-large 0 $gap-small;
				}
				.unlocked {
					color: $c-neutral-dark;
					i {
						//transform:rotate(45deg);
					}
				}
				.locked {
					color: $c-black;
					i {
						transform: rotate(0deg);
						//$padding-left: 3px;
						padding-top: 2px;
					}
				}
				&:hover {
					cursor: pointer;
					background-color: $warm-grey-200;
					i {
						color: $c-black;
					}
				}
			}
			.info-icons {
				place-content: center;
				border-top: 1px solid $c-neutral;
				height: 50%;
				div {
					font-size: 14px;
					color: $c-neutral-dark;
				}
				.clicks {
					font-size: 9px;
				}
				.conversions {
					span {
						font-size: 7px;
					}
				}
			}
		}

	}
	.position-pinned {
		position: absolute;
		top: -4px;
		right: 0px;
		transform: rotate(40deg);
		font-size: 16px;
		.pinned {
			color: $c-error-dark;
		}
	}
	.t-unpinned {	
		.pinned {
			display: none;
		}
		.unpinned {
			display: block;
		}
	}
	.t-pinned { 
		.unpinned {
			display: none;
		}
		.pinned {
			display: block;
		}
	}
	.t-click-high {
		.teaser-info {  
			.clicks {
				//color: $c-success !important ;
				color: $sky-blue-700 !important ;
				font-weight: 700;
			}
		}
	}
	.t-click-low {
		.teaser-info {  
			.clicks {
				color: $letterpress-red-900 !important ;
				font-weight: 700;
			}
		}
	}
	.t-conversions-high {
		.teaser-info {  
			.conversions {
				color: $c-success !important ;
				font-weight: 700;
			}
		}
	}
	.t-conversions-low {
		.teaser-info {  
			.conversions {
				color: $c-error-dark !important ;
				font-weight: 700;
			}
		}
	}
	.t-breaking { 
		.top-label {
			display: block !important;
		}
	}
	.t-emphasis {
		background-color: $c-black;
		.kicker, .main-title {
			color: $fc-lightest !important;
		}
		.meta {
			color: $fc-light !important;
		}
	}
	.t-subscription { 
		.subscription {
			display: block !important;
		}
	}
	.t-unlocked {	
		.locked {
			display: none;
		}
		.unlocked {
			display: block;
		}
	}
	.t-locked { 
		.unlocked {
			display: none;
		}
		.locked {
			display: block;
		}
	}
}

.default {
	.create-bundle {
		display: block;
	}
	.bundle-info {
		display: none;
	}
}
.tool-on-top,
.latest-articles,
.algorithm {
	.lock-teaser,
	.unlock-teaser,
	.position-pinned {
		display: none !important;
	}
}
.tool-on-top,
.latest-articles,
.algorithm {
	.position-lock {
		visibility: hidden;
		.locked {
			display: none;
		}
	}
}

.other,
.latest-articles {
	time.on-position {
		visibility: hidden;
	}
}
.tool-on-top,
.other {
	.copy-bundle {
		display: none;
	}
}
.latest-articles {
	.remove,
	.delete-image,
	.edit-image,
	.open-tools,
	.edit-with-wysiwyg,
	.info-icons,
	.create-bundle {
		display: none !important;
	}
	article {
		.teaser-info {
			padding-left: 0;
		}
	}
	.t-in-tp,
	.t-in-sp,
	.t-in-b {
		cursor: default
	}
	.t-in-tp .level-2,
    .t-in-sp .level-2 {
        padding-left: 24px;
    }
    .t-in-tp .level-2:before {
        content: 'TP';
    }
    .t-in-sp .level-2:before {
        content: 'SP';
    }
    .t-in-tp .level-2:before, .t-in-sp .level-2:before {
        position: absolute;
        top: 0;
        left: 0;
        font-family: "Source Sans Pro", "SourceSansPro-Regular";
        font-size: 13px;
        letter-spacing: 0px;
        line-height: 16px;
        font-weight: 400;
        color: #31312f;
        font-size: 11px;
        text-align: center;
        color: black;
        background-color: #fed865;
        border-radius: 2px;
        font-weight: 600;
        line-height: 18px;
        width: 18px;
        height: 18px;
    }
}

.bundled-articles {
	.bundle-info,
	.position-lock,
	.create-bundle  {
		display: none !important;
		opacity: 0 !important;
	}
	.remove {
		display: inline-block;
	}
}
.bundle {
	.remove,
	.create-bundle {
		display: none;
	}
	li {
		.remove {
			display: inline-block;
		}
	}
}
.paste-before,
.paste-after,
.paste-bundle-before,
.paste-bundle-after {
	display: none;
}
.unpinned {display: none !important;}