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

@import 'vars';

.article-list {
	&.tool-on-top,
	&.other,
	&.algorithm,
	&.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 {
		counter-reset: tool-on-top;
		li.article {
			&::before {
				position: absolute;
			    counter-increment: tool-on-top;
			    content: counter(tool-on-top);
				top: 0;
				left: 0;
				padding: $gap-small 0 $gap-tiny;
			    color: $fc-dark;
			    font-weight: 700;
			    font-size: 15px;
			    width: 32px;
				line-height: 1;
				text-align: center;
				border-bottom: 1px solid $c-neutral;
			    z-index: 1;
			}
		}
		.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 {
		li.article {
			&::before {
				position: absolute;
				top: 0;
				left: 0;
				padding: $gap-small 0 $gap-tiny;
			    color: $fc-dark;
			    font-weight: 700;
			    font-size: 15px;
			    width: 32px;
				line-height: 1;
				text-align: center;
				border-bottom: 1px solid $c-neutral;
			    z-index: 1;
			}
		}
		.images-hidden {
			article {
				.img-container {
					display: none !important;
				}
			}
		}
		.images-visible {
			article {
				.img-container {
					display: block !important;
				}
			}
		}
		ol li.article:nth-child(1) {
			&::before {
			    content: '7';
			}
		}

		ol li.article:nth-child(2) {
			&::before {
			    content: '13';
			}
		}
		ol li.article:nth-child(3) {
			&::before {
			    content: '18';
			}
		}
		ol li.article:nth-child(4) {
			&::before {
			    content: '22';
			}
		}
		ol li.article:nth-child(5) {
			&::before {
			    content: '23';
			}
		}
		ol li.article:nth-child(6) {
			&::before {
			    content: '30';
			}
		}
		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. Add a new secured position, remove or move this or another teaser in this column.';
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				border-radius: 4px;
				padding: 4px 8px;
				display: flex;
				flex-direction: column;
				align-items: end;
				justify-content: flex-end;
				color: $c-warning-dark;
				font-size: 21px;
				font-weight: 700;
				text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
				background-color: rgba(255, 255, 255, 0.9);
				border: 2px solid $c-warning-dark;
				z-index: 1;
			}
		}
		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: 0 $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;
				margin: $gap-tiny;
			}
		} 
		.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 {
		li {
			position: relative;
			margin: $gap-tiny $gap-default;
			//transition: height .25s ease-in-out;
			&.bundle {
				border: 2px solid $sea-green-500;
				box-shadow: $elevation-01;
				background-color: $c-white;
				border-radius: 4px;
				.bundle-info {
					display: flex;
					justify-content: space-between;
					padding: 6px $gap-small 0 $gap-large;
					color: $sea-green-500;
				}
				.bundled-articles {
					display: block;
					width: calc(100% - 32px);
					margin-left: 32px;
					min-height: 50px;
					li {
						margin: 0 0 0 0;
						&.article {
							&:first-child {
								margin-top: 0;
							}
						}
					}
					&:before {
						content: "DROP BUNDLE TEASER HERE";
						color: $sea-green-500;
						position: absolute;
						bottom: 13px;
						left: 0;
						right: 0;
						text-align: center;
					}
					ol {
						display: none;
					}
				}
			}
			&.dummy {
				margin: 0;
			}
			&.edit-lock {
				&:after {
					content: "Currently edited by Brian O'Brian...";
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					border-radius: 4px;
					padding: 4px 8px;
					display: flex;
					flex-direction: column;
					align-items: end;
					justify-content: flex-end;
					color: $c-warning-dark;
					font-size: 21px;
					font-weight: 700;
					text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
					background-color: rgba(255, 255, 255, 0.9);
					border: 2px solid $c-warning-dark;
					z-index: 1;
				}
				&:hover {
					.tools {
					    display: none;
				    }
				}
			}
			&.sortable-chosen {
				article {
					opacity: .8;
					box-shadow: 0px 10px 17px rgba(102, 100, 99, .5);
				}
			}
			&.sortable-ghost {
				opacity: 1;
				article {
					opacity: .75;
					border: 1px dashed $c-primary;
				}
			}
			.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;
		}
	}
	.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;
			.custom-select {
				width: 33%;
				margin-bottom: $gap-tiny;
			}			
		}
	}
	.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;
		}
	}
	fieldset {
		legend {
			margin-bottom: $gap-tiny;
		}
		.checkbox {
			display: block;
			float: left;
			margin-right: $gap-default;
		}
	}
	.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 {
		display: flex;
		flex-direction: column;
		position: relative;
		border-radius: 4px;
		background-color: $c-white;
		cursor: move;
		transition: opacity .5s ease-in-out;
		transition: background-color .25s;
		box-shadow: $elevation-01;
		border: 1px solid $c-neutral;
	    .article-container {
			display: flex;
			margin: $gap-small 0 $gap-small $gap-large;
			padding-left: $gap-small;
			min-height: 85px;
	    }
		.img-container {
			position: relative;
			width: 25%;
		    padding-bottom: 14%; // 16:9 ratio (20% of 56.25)
			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;
			padding: 0 $gap-default;
			.titles {
				margin-bottom: $gap-tiny;
				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;
				}
				.kicker,
				.deck {
					@include label;
				}
			}
			.meta {
				display: flex;
				flex-direction: column;
				@include label;
				color: $fc-dark-medium;
				.level-1,
				.level-2 {
					justify-content: space-between;
				}
				div {
					display: flex;
				}
				.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: inline-block;
					span {
						padding-left: $gap-tiny;
					}
					&:before {
						content: '•';
						font-weight: normal;
					}
				}
				.subscription {
					font-weight: 700;
					display: none;
				}
				
			}
		}
		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;
				}
			}
		}
		&.ui-sortable-helper {
			cursor: grabbing;
		}
		&:hover {
			.tools {
				transition: opacity .25s ease-in-out .25s;
				opacity: 1;
			}
		}
		
		.teaser-info {
			display: flex;
			flex-direction: column;
			place-content: flex-end;
			box-sizing: content-box;
			position: absolute;
			width: 32px;
			border-radius: 3px;
			top: 0;
			left: 0;
			bottom: 0;
			padding: $gap-medium 0 $gap-small;
			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;
			}
			.info-icons {
				div {
					height: 20px;
					text-align: center;
					justify-content: center;
					align-items: center;
					font-size: 14px;
					color: $c-neutral-dark;
					width: 32px;
					font-weight: 700;
				}
				.conversions {
					span {
						font-size: 7px;
					}
				}
			}
		}
	}
	.position-lock {
		position: absolute;
		top: -4px;
		right: 0px;
		transform: rotate(40deg);
		font-size: 16px;
		.locked {
			color: $c-error-dark;
		}
	}
	.t-unlocked {	
		.locked {
			display: none;
		}
		.unlocked {
			display: block;
		}
	}
	.t-locked { 
		.unlocked {
			display: none;
		}
		.locked {
			display: block;
		}
	}
	.t-click-high {
		.teaser-info {  
			.clicks {
				color: $c-success !important ;
				font-weight: 700;
			}
		}
	}
	.t-click-low {
		.teaser-info {  
			.clicks {
				color: $c-error-dark !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;
		}
	}
}






.text-editor-toolbar {
    display: none;
    position: absolute;
    padding: 0 $gap-tiny $gap-tiny;
    border: 1px solid $c-black;
    z-index: 10;
    transition: all .25s ease-in;
    .tool-btn {
	    float: right;
	    &:hover {
		    color: $fc-light;
	    }
    }
    ul {
	    list-style: none;
	    clear: right;
    }
    li {
	    display: inline-block;
	    button {
			padding: $gap-tiny;
		    font-size: 18px;
		    cursor: pointer;
		    width: 32px;
		    border: 0;
		    transition: color .25s ease-in;
		    &.style-emphasize {
			    color: $c-error;
			    &:hover {
				    color: lighten($c-error, 25%);
			    }
		    }
		    &.style-italic {
			    font-style: italic;
		    }
		    &.style-underline {
			    text-decoration: underline;
		    }
		    
		    &:hover {
			    color: $fc-light;
			}
		}
    }
}

ol li.article.default:hover,
ol li.article.default:hover  {
	.tools {
		z-index: 2;
		opacity: 1 !important;
	}
}
.bin {
	display: none;
}
/*
.bin {
	height: 0;
    position: absolute;
    top: 0px;
    width: 100%;
    left: -1px;
    color: $c-secondary;
    font-size: 50px;
    text-align: center;
    overflow: hidden;
    z-index: 1500;
    transition: height .25s ease-in-out;
    .placeholder {
		background: red;
    }
    .article {
	    display: none;
    }
}
.dragging {
	.bin {
		border-width: 1px 0px 1px 1px;
		border-radius: 4px 4px 0 0;
		padding-top: 9px;
		height: 99px;
	}
}

.hide-top-positions,
.hide-other-positions,
.hide-algorithm-positions {
	.article-list h2 {
		display: inline-block;
	}
	.article-list.tool-on-top,
	.article-list.other,
	.article-list.algorithm {
		article .text-container {
			.kicker,
			.deck {
				font-size: 18px;
				padding: 2px $gap-default;
			}
			.main-title {
				font-size: 22px;
				padding: 2px $gap-default;
			}
		}
	}
}
*/
.default {
	.create-bundle {
		display: block !important;
	}
	.bundle-info {
		display: none;
	}
}
.tool-on-top,
.latest-articles,
.algorithm {
	.lock-teaser,
	.unlock-teaser,
	.position-lock {
		display: none !important;
	}
}

.other,
.latest-articles {
	time.on-position {
		visibility: hidden;
	}
}
.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;
		}
	}
}

.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;
		}
	}
}

.unlocked {display: none !important;}