@import "base";
@import "mixins";

.blocks-inner {
    @include clearfix;
}

.block-layout-background-image-position-y-top {
    background-position-y: top;
}

.block-layout-background-image-position-y-center {
    background-position-y: center;
}

.block-layout-background-image-position-y-bottom {
    background-position-y: bottom;
}

.block-layout-background-image-position-x-left {
    background-position-x: left;
}

.block-layout-background-image-position-x-center {
    background-position-x: center;
}

.block-layout-background-image-position-x-right {
    background-position-x: right;
}

.page-layout-normal .block-layout-alignment-block-right,
.page-layout-normal .block-layout-alignment-block-left {
    max-width: 20%;
    @include clearfix;
}

.block-layout-alignment-block-left .item.resource:not(:last-child),
.block-layout-alignment-block-right .item.resource:not(:last-child) {
    margin-bottom: $spacing-large;
}

.block-layout-alignment-block-left.media-embed.layout-horizontal .item.resource:not(:only-child),
.block-layout-alignment-block-right.media-embed.layout-horizontal .item.resource:not(:only-child) {
    margin-right: $spacing-large;
}

.block-layout-alignment-block-left .item.resource,
.block-layout-alignment-block-right .item.resource {

    .media-render:not(:last-child) {
        margin-bottom: $spacing-small;
    }

    .media-render a {
        display: block;
    }

    audio,
    canvas,
    video,
    progress,
    img {
        max-width: 100%;
        vertical-align: bottom;
    }
}

.page-layout-normal .block.block-layout-alignment-block-left {
    float: left;
    clear: left;
    margin: 0 1rem 1rem 0;
}

.page-layout-normal .block.block-layout-alignment-block-right {
    float: right;
    clear: right;
    margin: 0 0 1rem 1rem;
}

.page-layout-normal .block.block-layout-alignment-block-left + .block, 
.page-layout-normal .block.block-layout-alignment-block-right + .block {
    margin-top: 0;
}

.page-layout-normal .block.block-layout-alignment-block-center {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1rem auto;
    clear: both;

    .item:only-child {
        width: 100%;
    }
}

.block-layout-alignment-block-left .item.resource > a:first-child,
.block-layout-alignment-block-right .item.resource > a:first-child {
    vertical-align: top;
}

.block-layout-alignment-block-left .item.resource > h3,
.block-layout-alignment-block-right .item.resource > h3 {
    margin: 0;
}

.block-layout-alignment-block-left .item.resource + p,
.block-layout-alignment-block-right .item.resource + p {
    margin-top: 0;
}

.block-layout-alignment-text-right {
    text-align: right;
}

.block-layout-alignment-text-center {
    text-align: center;
}

.block-layout-alignment-text-justify {
    text-align: justify;
}

.block-layout-background-image-size-cover,
.block-layout-background-image-size-contain {
    background-repeat: no-repeat;
}

.block-layout-background-image-size-cover {
    background-size: cover;
}

.block-layout-background-image-size-contain {
    background-size: contain;
}

.media-embed .resource {
    display: inline-block;
    max-width: 100%;
}

.media-embed.attachment-count-1 {
    width: 100% !important;
}

.media-embed.layout-vertical:not(.attachment-count-1) {
    display: grid;
}

.media-embed.layout-horizontal.attachment-count-2 {
    --grid-column-count: 2;
}

.media-embed.layout-horizontal.attachment-count-3 {
    --grid-column-count: 3;
}

.media-embed.layout-horizontal.multiple-attachments {
    --grid-column-count: 4;
}

.media-embed.layout-horizontal {
    --grid-item--min-width: 150px; 
    --grid-layout-gap: #{$spacing-large};
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
    grid-gap: var(--grid-layout-gap);
    width: 100vw;
    max-width: 100%;
    align-items: center;
}

.media-embed.layout-vertical .iiif_presentation {
    width: 100vw;
}

.media-embed.layout-horizontal.multiple-attachments .item.resource {
    margin-bottom: 0;
}

.media-embed .resource {
    vertical-align: top;

    &:not(:last-child) {
        margin-bottom: $spacing-large;
    }

    h3 {
        font-size: 1rem;
        line-height: 1.5rem;
        margin: .5rem 0 0;
    }

    &:not(:only-child) img {
        width: auto;
        vertical-align: top;
        margin-bottom: 0;
    }

    .iiif_presentation {
        max-width: 100%;
    }

    .media-render > a:not(:only-child) {
        margin-bottom: $spacing-small;
    }

    .caption {
        font-size: .875rem;
        line-height: 1.5rem;

        * {
            margin: 0 0 1rem 0;
        }

        & > *:last-child {
            margin-bottom: 0;
        }
    }

    .media-render img,
    .media-render video,
    .media-render audio {
        max-width: 100%;
        height: auto;
    }

    audio {
        width: 100%;
    }
} 

.media-render iframe,
.block-oembed iframe {
    max-width: 100% !important;
}

.break {
    width: 100%;
    clear: both;
    border-bottom: 1px solid $border-gray;
    padding-bottom: -1px;
    margin: 1rem 0;

    &.transparent {
        border-color: transparent;
    }

    &.opaque {
        border-color: $border-gray;
    }
}

.preview-block:after {
    content: "";
    display: block;
    clear: both;
}

.toc-block > ul {
    margin: 1rem 0;
    list-style-type: none;
    border-left: 5px solid $border-gray;
}

.toc-block > ul > li {
    margin-bottom: .5rem;
}

.toc-block > ul > li > a {
    font-weight: bold;
}

.toc-block ul ul {
    list-style-type: none;
    padding-left: 0;
}

.toc-block ul ul ul {
    padding-left: 1.25em;
}

.toc-block ul ul li:before {
    content: "\2014";
    color: $border-gray;
}

.item-with-metadata {
    @include clearfix;
}

.item-with-metadata .show.resource {
    margin: 0;
}

.block-listOfSites .site-list {
    container-type: inline-size;

    .site {
        margin-bottom: .5rem;
        @include clearfix;
        display: flex;
    }

    .site-thumbnail {
        flex: 0 0 auto;
    }

    .site-link {
        display: inline-block;
        font-size: 1.25rem;
        margin-bottom: .25rem;
    }
    
    .site-summary {
        margin: 0 0 .25rem .0;
        line-height: 20px;
    }
    
    .site-thumbnail-image {
        max-height: 3 * $base-line-height;
        margin-right: 1rem;
    }
}

@container (max-width: 300px) {
    .block-listOfSites .site-list .site {
        flex-wrap: wrap;
    }
}

.block-listOfSites .pagination {
    width: auto;
    margin: 0 0 $spacing-large;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    & > * {
        margin-bottom: $spacing-small;
    }
}

.assets .asset,
.assets .asset img {
    max-width: 100%;
    height: auto;
}

.assets .asset:not(:last-child) {
    margin-bottom: 1rem;
}

.assets .link-title {
    display: block;
    font-size: 1.25rem;
    font-weight: bold;
}

.page-layout-normal .block {
    margin: 1rem 0;
}

.block-pageTitle.has-background h2 {
    margin: 0;
}

.page-date-time .property {
    font-weight: bold;
}

.page-date-time > div {
    display: inline-block;
    margin: 0;
}

.page-date-time .property, 
.page-date-time .value {
    display: inline;
}

.page-date-time > div {
    margin-right: 1rem;
}

.block-blockGroup:after {
    content: "";
    display: block;
    clear: both;
}

.block-html.has-background > *:first-child {
    margin-top: 0;
}

.block-html.has-background > *:last-child {
    margin-bottom: 0;
}

@media screen and (max-width:640px) {
    .page-layout-normal .block-layout-alignment-block-right,
    .page-layout-normal .block-layout-alignment-block-left {
        max-width: 40%;
    }    
}
