/*****************************************************************************/
/* Public Interface                                                           /
/*****************************************************************************/
:root {
	/* Must be defined by user */
	--list-width: 0em;
	--list-background-color: #FFF;
}

/*****************************************************************************/
/* Private Interface                                                          /
/*****************************************************************************/
#list {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--list-width);
	height: 100dvh;

	overflow-y: auto;

	background-color: var(--list-background-color);

    @media (max-width: 800px) {
        width: 100vw;
        z-index: 10;
        display: none;

        &.list-active {
            display: block;
        }
    }
}
.list-main {
	margin-left: var(--list-width);
	width: calc(100vw - var(--list-width));
}
.list-slideout {
	position: absolute;
	left: 5pt;
	top: 5pt;
	width: 36pt;
	height: 36pt;
	z-index: 10;
	opacity: .7;

	display: none;

	font-size: 24pt;
	text-align: center;
	-moz-user-select: none;
	user-select: none;

	background-color: var(--light-green);
	border: 1px solid var(--border-color);
	box-shadow: 0px 0px 2px #FFF;

    &.list-slideout-active {
        @media (max-width: 800px) {
            display: block;
        }
    }
}
.list-item {
	--item-pad: 4pt;
	padding: var(--item-pad);
	border-bottom: 1px solid black;
	background-color: var(--list-background-color);

    &.list-item-selected {
        background-color: var(--highlight-color);
    }
    &.list-item-viewed {
        background-color: var(--light-green);
    }
    &.list-title {
        background-color: var(--medium-green);
        text-align: center;
    }
    &::after {
        float: right;
        position: relative;
        border-left: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        margin: calc(var(--item-pad) * -1);
        padding: 1pt;
        font-style: italic;
        color: #FFF;
    }
}
#list-search {
    background-color: var(--list-background-color);
    width: calc(100% - 10pt);
    margin: 0;
    padding: 5pt;

    /* Show that it's distinct from other list elements by making it appear to float above */
    position: sticky;
    top: 0;
    border-bottom: 2px solid var(--border-color);
    box-shadow: var(--border-color) 0px 0px 4px;
}