#explorer {
    background-color: var(--c-100);
    color: var(--c-800);
    align-items: center;
    position: relative;

    @media (max-width: 599px) {
        width: 100vw;

        >summary,
        >.contents {
            width: calc(100vw - 20px);
        }
    }

    >.contents {
        min-width: 200px;
    }

    &[open] {
        grid-column: span 2;
        align-items: start;

        >summary {
            cursor: pointer;

            @media (min-width: 600px) {
                width: fit-content;
            }

            align-items: flex-start;
            justify-content: flex-start;

            :not(icon) {
                display: inline-block;
            }
        }

        &:not(:first-child) {
            display: block;
        }

        +* {
            grid-column: span 1;
        }
    }

    &.file-list,
    .file-list {
        display: flex;
        row-gap: var(--row-gap);
        flex-direction: column;
        /* padding: 10px 4px; */
    }

    .file-list,
    details details {
        padding-left: 16px;
    }

    .files {
        display: flex;
        flex-direction: column;
        row-gap: var(--row-gap);
        width: 100%;

        max-height: 50vh;

        @media (min-width: 1024px) {
            max-height: var(--max-h);
        }
    }

    >summary {
        @media (min-width: 600px) {
            :not(icon) {
                display: none;
            }
        }

        &:hover {

            icon,
            strong {
                color: var(--c-900);
            }
        }
    }

    &,
    details {
        display: flex;
        flex-direction: column;
        row-gap: var(--row-gap);

        summary {
            list-style: none;

            &::-webkit-details-marker {
                display: none;
            }
        }
    }

    >* {
        width: 100%;
    }

    +* {
        grid-column: span 2;
    }

    &:not(:first-child) {
        display: none;
    }

    .file-item {
        display: flex;
        flex-direction: row;
        gap: 1ch;
        padding: 4px 8px 4px 4px;
        border-radius: 4px;
        font-size: 13px;
        color: var(--c-900);
        cursor: pointer;

        .control {
            margin-left: auto;
            display: none;

            &:hover {
                color: var(--error);
            }
        }

        &:hover {
            background-color: color-mix(in srgb, var(--c-border) 80%, black);

            .control {
                display: block;
            }
        }

        &.active {
            background-color: var(--c-border);
        }
    }
}