/*
 * @author:		Procurios
 * @Snippet: 	Document seeker
 * @about: 		ds-labels.css - Labels overview in the document seeker snippet
 */

.ml-document-seeker-index {
    ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .ds-s-container {
        max-width: 40em;
    }

    .ds-s-status-text {
        display: none;
    }

    /**
     * Labels list
     */

    .ds-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
        gap: calc(var(--ds-gap) * 2) calc(var(--ds-gap) / 2);
        width: 100%;
        padding-top: calc(var(--ds-gap) * 2) !important;
    }

    .ds-l-letter {
        position: relative;
        min-height: 5em;
        padding: .5em;
        background-color: var(--ds-color30);
    }

    /** Use #content before .ml-document-seeker to override styles from other stylesheet. Sorry CSS Conventions :-( **/
    .ds-l-letter h3 {
        position: absolute;
        top: calc(var(--ds-gap) * -1);
        margin: 0;
        padding: 0;
        font-size: calc(var(--ds-gap) / 1.5);
        line-height: 1;
        opacity: var(--ds-opacity);
    }

    .ds-list p {
        margin: 0;
        padding: .2em .5em;
    }

    .ds-l-show-all,
    .ds-l-show-less {
        padding-right: 1em;
        font-size: var(--ds-smallText);
        background: transparent url(/ui/uibase/icons/svg/chevron-down.svg) no-repeat 100% center / .9em;
        opacity: var(--ds-opacity);
    }

    .ds-l-show-less {
        background-image: url(/ui/uibase/icons/svg/chevron-up.svg)
    }

    .ds-l-show-less--hidden,
    .ds-l-show-all--hidden,
    .ds-l-letter__label--hidden {
        display: none;
    }
}