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

.bundles {
    .grid-main {
        grid-template-columns: 1fr;
    }
    .tool-on-top,
    .other {
        display: none !important;
    }
    .position-lock {
        visibility: hidden;
    }
    .bundles-repo {
        display: block !important;
		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;
			}
        }
        ol.articles {
            position: relative;
            min-height: 32px;
            &:before {
                content: '⇧ Drop main bundle teaser here ⇧';
                color: $sea-green-500;
                text-transform: uppercase;
                position: absolute;
                top: 16px;
                right: 0;
                bottom: 0;
                left: 0;
                display: flex;
                justify-content: center;
            }

            > li.article {
                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 4px 4px;
                .bundle-info {
                    display: flex;
                    justify-content: flex-end;
                    padding: 0 $gap-small 0 $gap-large;
                    color: $sea-green-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;
                    }
                }
                &.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: 0;
                    padding: 0;
                    &:before {
                        display: none !important;
                    }
                    article,
                    .bundle-info,
                    .bundled-articles {
                        display: none;
                    }
                }
                .remove,
                .create-bundle {
                    display: none;
                }
            }
            li.article {
                .teaser-content {
                    &:before {
                        content: "";
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        border: 2px solid transparent;
                        border-radius: 4px;
                        margin: -2px;
                    }
                }
                .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;
                    }
                }
                .editable .teaser-content {
                    &:before {
                        border: 2px solid $c-primary;
                    }
                }
                &:hover {
                    .editable .teaser-content {
                        &:before {
                            border: 2px solid $c-primary;
                        }
                    }
                }
                .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;
					}
                }
                &.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;
                    &:before {
                        display: none;
                    }
                    article,
                    .bundle-info,
                    .bundled-articles {
                        display: none;
                    }
                }
            }
            li.article li.article {
                .remove {
                    display: block;
                }
            }
            article .article-container {
                min-height: auto;
            }
            article .teaser-info .position-lock .locked, .article-list article .teaser-info .position-lock .unlocked {
                padding: 0;
            }
            .article .teaser-content .img-container {
                width: 12%;
                padding-bottom: 7.43%;
            }
        }
	}
}