header, footer {
    background: var(--accent-blue);
}

a {
    &:hover {
        color: var(--accent-blue);
    }
}

.display-main {
    width: 100%;

    display: flex;

    justify-content: center;

    padding: 10px;
    gap: 10px;

    &.loading *:is(.display-image, .display-tags) {
        display: none;
    }

    &.loading::after {
        content: 'loading...';
        display: block;
    }
}

.display-image {
    position: relative;
    height: fit-content;

    img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 95vh;

        display: none;
    }

    img.showing {
        display: block;
    }

    &.blacklisted img {
        filter: brightness(0);
        cursor: pointer;
    }

    &.blacklisted::after {
        content: 'this entry contains tags in your blacklist:\A' attr(data-blacklisted-tags) '\A\A click to show anyway';

        white-space: pre;
        padding: 20px;
        text-align: center;

        position: absolute;
        inset: 0;
        place-self: center;

        pointer-events: none;
    }

    &.blacklisted .display-nav-container {
        display: none;
    }
}

.display-nav-container {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;

    display: flex;
}

.display-nav {
    flex: 1;
    position: relative;
    opacity: 0;

    cursor: pointer;

    container-type: size;

    &:hover {
        opacity: 1;
    }

    svg {
        position: absolute;
        inset: 0;
        align-self: center;

        font-size: 10cqb;
    }

    &.display-previous svg {
        margin-left: 10px;
        justify-self: left;
    }
    &.display-next svg {     
        margin-right: 10px;   
        justify-self: right;
    }

    &.display-previous {
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, transparent 50%)
    }
    &.display-next {
        background-image: linear-gradient(to left, rgba(0, 0, 0, 0.25) 0%, transparent 50%)
    }
}

.display-mobile-nav {
    display: none;
}

.display-counter-container {
    display: flex;
    justify-content: center;

    padding: 10px;

    background: rgba(0, 0, 0, 0.2);
}

.display-counter {    
    background: var(--accent-blue);

    padding: 5px 20px;

    /* border-radius: 10px; */
            
    display: flex;
    gap: 5px;
}

.display-counter-pip {
    width: 10px;
    height: 10px;

    background: color-mix(in oklab, var(--bg-color) 25%, transparent 75%);
    /* border-radius: 50%; */

    &.showing {
        background: var(--bg-color);
    }
}

.display-tags {
    background: var(--accent-blue);
    color: var(--bg-color);

    padding: 10px;

    min-width: fit-content;

    p {
        font-weight: bold;
    }

    ul {
        margin-left: 2ch;
        list-style-type: square;

        &:not(:last-of-type) {            
            margin-bottom: 2ch;
        }
    }
}

.tag-num-entries {
    font-size: 0.75em;
    opacity: 0.75;
}

@media (max-width: 45em) {
    .display-main {
        flex-direction: column;
        align-items: center;
    }

    .display-image {
        display: grid;
        grid-template-rows: fit-content fit-content;
    }

    .display-nav-container {
        display: none;
    }

    .display-counter-container {
        gap: 10px;
        grid-row: 1 / 2;
    }
    .display-images {
        grid-row: 2 / 3;
    }
    
    .display-counter {
        align-items: center;
    }

    .display-mobile-nav {
        display: block;
        background: var(--accent-blue);
        color: var(--bg-color);

        flex: 1;

        display: flex;
        align-items: center;
        justify-content: center;

        cursor: pointer;
    }

    .display-mobile-nav, .display-counter {
        padding: 10px;
    }

    .type-collection {
        display: none;
    }
}