/*
 * @author:		Procurios
 * @Snippet: 	Document seeker
 * @about: 		ds-general.css - General layout and positioning of the document seeker snippet
 */

/**
 * mod_library Document Seeker
 */

.ml-document-seeker {
    --ds-color: 200, 200, 200;
    --ds-color50: rgba(var(--ds-color), .3);
    --ds-color30: rgba(var(--ds-color), .2);
    --ds-smallText: max(12px, .8em);
    --ds-filterWidth: 240px;
    --ds-gap: 2rem;
    --ds-opacity: .7;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--ds-gap) / 2) var(--ds-gap);
    width: 100%;

    fieldset {
        margin: 0;
    }

    button {
        margin: 0;
        padding: 0;
        border: 0;
        color: inherit;
        background: transparent;
        box-shadow: none;
    }

    /**
     *  Back-to-the-index button
     */

    .ds-back {
        position: absolute;
    }

    .ds-back a {
        padding-left: 1.5em;
        font-size: var(--ds-smallText);
        text-decoration: none;
        background: transparent url(/ui/uibase/icons/svg/arrow-left.svg) no-repeat 0 center / .9em;
    }

    /**
     * Search and status text
     */
    .ds-search {
        flex: 0 100%;
        display: flex;
        gap: calc(var(--ds-gap) / 4);
        flex-direction: column;
    }

    .ds-s-status-text {
        margin: 0 auto 0 0;/** Center search container */
        font-size: var(--ds-smallText);
        opacity: var(--ds-opacity);
    }

    .ds-s-container {
        position: relative;
        order: -1;/** Positioned before .ds-s-status-text */
        flex: 1;
    }

    .ml-document-seeker-labels .ds-s-container {
        margin-left: auto;/** Center search container */
    }

    .ds-scf-input,
    .ds-scf-input:is(:hover,:focus,:active) {
        width: 100%;
        margin: 0;
        padding-right: 2em;/** make space for the button */
    }

    .ds-search button {
        position: absolute;
        inset: 0 0 0 auto;
        aspect-ratio: 1;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        text-indent: -999em;
        background: transparent url(/ui/uibase/icons/svg/view.svg) no-repeat center / 1em;
    }

    /**
     * Search suggestions
     */

    .ds-sc-suggestions {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 999;
        width: 100%;
        max-height: min(30em, 100vh);
        overflow: auto;
        margin: 0;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 1px 1px 0 rgba(65,69,73,.3),0 1px 3px 1px rgba(65,69,73,.15), 0 10px 50px #0000000f;
    }

    .ds-scs-no-results {
        display: block;
        padding: 1em;
        text-align: center;
    }

    .ds-sc-suggestions:empty {
        display: none;/** Hide if no suggestions are left after further refining the search query */
    }

    .ds-scs-section {
        margin-block: 1em;
    }

    .ds-scs-section h3 {
        float: left;
        width: 8rem;
        font-size: .7em;
        font-weight: normal;
        text-align: right;
        line-height: 2.5;
    }

    .ds-scs-section ul {
        margin: 0 1rem 0 8rem;
        list-style-type: '';
    }

    .ds-scs-section li {
        width: 100%;
    }

    .ds-scs-section li a {
        position: relative;
        display: block;
        padding: .5em .5em .5em 2em;
        font-size: var(--ds-smallText);
        line-height: 1.2;
        text-decoration: none;
    }

    .ds-scs-section .pb-icon-16 {
        position: absolute;
        top: 0;
        bottom: 0;
        left: .3em;
        width: 1em;
        height: 1em;
        margin: auto;
        background: no-repeat center / contain;
    }

    /** Label suggestions **/
    .ds-scss-labels li a {
        padding-left: 10px;
    }

    .ds-scs-section li a:hover,
    .ds-scs-section .ds-scss-focus {
        background-color: var(--ds-color50);
    }

    .ds-scs-section.ds-scss-labels ul {
        padding-bottom: 0;
        border-bottom: 0;
    }

    /**
     * Filter
     */

    .ds-filter {
        flex: 0 100%;
    }

    @media screen and (min-width: 60rem) {
        .ds-filter {
            flex: 0 var(--ds-filterWidth);
            align-self: flex-start;
        }
    }

    .ds-filter h3 {
        margin-bottom: 1rem;
        font-size: var(--ds-smallText);
    }

    .ds-filter fieldset {
        margin: 0;
        padding: 0;
        border: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(calc(var(--ds-filterWidth) - 1em), 1fr));/** Keep filter sections same width as if in sidebar layout */
    }

    .ds-f-field {
        margin: 0;
        padding: .5em 0;
        overflow: hidden;
        border-top: 1px solid var(--ds-color50);
    }

    .ds-ff-label {
        padding: 0;
        font-weight: bold;
    }

    .ds-ff-list {
        margin: .5em 0;
        padding: 0;
        list-style-type: '';
    }

    .ds-ff-list li {
        margin: 0 0 .5em;
    }

    .ds-ffl-amount {
        font-size: var(--ds-smallText);
        opacity: var(--ds-opacity);
    }

    .ds-ff-dates a {
        text-decoration: none;
    }

    .ds-ff-dates a:hover {
        text-decoration: underline;
    }

    .ds-ff-dates .active {
        font-weight: bold;
    }

    /**
     * Search results
     */

    .ds-results {
        flex: 1;
        width: calc(100% - var(--ds-filterWidth) - var(--ds-gap));
    }

    /**
     *  Results
     **/

    /** Sorting options */
    .ds-r-sorting {
        width: 100%;
        margin-bottom: .5em;
        text-align: end;
        line-height: 1.1;
        font-size: var(--ds-smallText);
    }

    .dsrs-caption {
        display: inline-block;
        opacity: var(--ds-opacity);
    }

    .ds-r-sorting ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        list-style-type: '';
    }

    .ds-r-sorting li {
        display: inline-block;
        margin-left: .5em;
    }

    .ds-r-sorting a {
        display: block;
        padding: 0 5px;
        text-decoration: none;
    }

    .ds-r-sorting a:hover {
        cursor: pointer;
    }

    /** Sorting state */
     .dsrs-active-descending a,
      .dsrs-active-ascending a {
        font-weight: bold;
        padding-right: 1.2em;
        background: transparent no-repeat right center / .7em;
    }

     .dsrs-active-descending a {
        background-image: url(/ui/uibase/icons/svg/arrow-down.svg)
    }

    .dsrs-active-ascending a {
        background-image: url(/ui/uibase/icons/svg/arrow-up.svg)
    }

    /**
     * List items
     */

    .ds-r-results {
        margin: 0;
        padding: 0;
        overflow: hidden;
        list-style: none;
    }

    .ds-rr-odd,
    .ds-rr-even {
        position: relative;
        width: 100%;
        margin: 0;
        border-top: 1px solid var(--ds-color50);
    }

    /**
     * Links
     */

    .ds-r-results a {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        padding-block: .5em;
        padding-left: 1em;
        text-decoration: none;
    }

    .ds-r-results a:hover {
        background: var(--ds-color30);
    }

    /**
     * Meta information
     */

    .ds-r-results a > * {
        overflow: hidden;
        padding: .2em .5em;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ds-r-results a > *:not(.ds-rr-title) {
        font-size: .9em;
    }

     .ds-r-results a > *:not(.ds-rr-title:hover) {
        color: initial;
    }

    .ds-rr-title {
        order: 1;
        flex: 1 calc(100% - 8rem);
        font-size: 1em;
        font-weight: bold;
    }

    .ds-r-results .ds-rr-labels {
        order: 5;
    }

    .ds-r-results .ds-rr-date {
        order: 2;
        width: min-content;
        text-align: end;
    }

    .ds-rr-filesize {
        order: 4;
    }

    .ds-rr-import-user {
        order: 6;
    }

    .ds-r-results .pb-icon-16 {
        order: 0;
        position: absolute;
        top: 1em;
        left: .2em;
        height: 1em;
        aspect-ratio: 1;
        background: no-repeat right center / contain;
    }

    .ds-rr-description {
        order: 8;
        flex: 0 100%;
        margin: 0;
        opacity: .7;
    }

    .ds-r-results a > .ds-rr-description {
        font-size: var(--ds-smallText);
    }

    /**
     * Separators
     */

    .ds-rr-filesize ~ .ds-rr-import-user::before,
    .ds-rr-labels ~ .ds-rr-import-user:before,
    .ds-rr-labels ~ .ds-rr-filesize::after {
        content: '/';
        opacity: 0.3;
    }

    .ds-rr-filesize ~ .ds-rr-import-user::before {
        margin-right: 1em;
    }

    .ds-rr-labels ~ .ds-rr-filesize::after {
        margin-left: 1em;
    }
}

@media screen and (max-width: 59.99rem) {
    .ml-document-seeker-labels .ds-s-status-text {
       margin-inline: auto 0;
    }

    .ml-document-seeker--filterVisible .ds-filterToggler--hide,
    .ml-document-seeker:not(.ml-document-seeker--filterVisible) .ds-filterToggler--show {
        display: block !important;/** Because the places where the show/hide filter in custom UI js is implemented, this fix is necessary for the UIs that want to use the show/hide filter from the module itself. */
    }

    button.ds-filterToggler {
        flex: 0 100%;
        padding-left: 1.5em;
        text-align: left;
        background: transparent url(/ui/uibase/icons/svg/filter.svg) no-repeat 0 center / .9em;
        transition: none;
        transform: none;
    }

    .ds-filterToggler--show[data-filtercount]:after {
        content: ' (' attr(data-filtercount) ')';
    }

    button.ds-filterToggler--hide:hover {
        background-image: url(/ui/uibase/icons/svg/close.svg)
    }

    .ds-filter > h3 {
        display: none;/** otherwise the transition wont work */
    }

    .ml-document-seeker .ds-filter {
        display: none;
        grid-template-rows: 0fr;
    }

    .ml-document-seeker--animating .ds-filter {
        transition-property: display grid-template-rows;
        transition-behavior: allow-discrete;
        transition-duration: .3s;
    }

    .ml-document-seeker--filterVisible .ds-filter {
        display: grid;
        grid-template-rows: 1fr;
        @starting-style {
            grid-template-rows: 0fr;
        }
    }

    .ml-document-seeker .ds-filter form {
        overflow: hidden;
    }
}

@media screen and (min-width: 60rem) {
    .ml-document-seeker-labels .ds-search {
        margin-left: calc(var(--ds-filterWidth) + var(--ds-gap));/** Index page needs no margin */
    }

    .ml-document-seeker-labels .ds-s-container {
        margin-bottom: var(--ds-gap)
    }

    .ml-document-seeker-labels .ds-s-status-text {
        margin-bottom: calc(var(--ds-gap) * -1);
    }
}