/************
* Listing : résultats de recherche et À surveiller
*************/
.tx-udembourses-surveiller, .tx-udembourses-searchresults {
    .bourses {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-big);

        @media screen and (min-width: 992px) {
            gap: var(--spacing-huge);
        }
    }

    a.bourse {
        display: flex;
        flex-direction: column;
        padding: var(--spacing-huge);
        text-decoration: none;
        border-radius: var(--border-radius-medium);
        color: inherit;
        transition: box-shadow 0.2s ease;
        box-shadow: inset 0 0 0 1px var(--colors-ui-bordure-secondaire);

        .titre {
            text-decoration: underline;
            text-decoration-color: transparent;
            text-decoration-thickness: 2px;
            text-underline-offset: 6px;
            transition: text-decoration-color .5s ease;
            font-size: var(--font-size-h4);
            line-height: var(--font-line-height-h4);
            margin-top: 0;
        }

        &:hover {
            box-shadow: inset 0 0 0 3px var(--colors-ui-element-hover);

            .titre {
                text-decoration-color: currentColor;
            }
        }

        @media screen and (min-width: 992px) {
            flex-direction: row;
            align-items: stretch;
            gap: var(--spacing-huge);
        }

        .bourse-corps {
            flex: 3;
        }

        .description, .description p {
            margin-bottom: var(--spacing-huge);
            font-size: var(--font-size-defaut);
            line-height: var(--font-line-height-defaut);
            overflow-wrap: break-word;
            @media screen and (min-width: 992px) {
                margin-bottom: 0;
            }
        }

        .bourse-infos {
            display: block;

            @media screen and (min-width: 992px) {
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-left: 1px solid var(--colors-ui-bordure-secondaire);
                padding-left: var(--spacing-huge);
                gap: var(--spacing-huge);
                flex: 1;
            }
        }

        .infos-champs {
            flex: 1;
        }

        .date-limite, .montant {
            font-size: var(--font-size-small);
            line-height: var(--font-line-height-small);
            margin: 0;

            b {
                display: block;
                font-size: var(--font-singleline-xlarge);
                line-height: var(--font-line-height-defaut);
                font-weight: var(--font-weight-semi-bold);
                margin-bottom: var(--spacing-small);
            }
        }

        .date-limite b {
            margin-bottom: 0;
        }

        .pastille-chevron {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-top: var(--spacing-big);

            @media screen and (min-width: 992px) {
                display: none;
                margin-top: 0;
            }

            udem-icone {
                width: 28px;
                height: 28px;
                @media screen and (min-width: 992px) {
                    width: 34px;
                    height: 34px;
                }
            }
        }
    }
}

.tx-udembourses-surveiller {
    h2 {
        margin-top: 0;
    }

    h3 {
        margin-top: var(--spacing-huge);
    }
}

/************
* Fiche
*************/
.tx-udembourses-fichebourse {
    /* todo : retirer cette ligne quand les styles globaux seront faits */

    p, div, li {
        font-size: var(--font-size-medium);
        line-height: var(--font-line-height-medium);
    }

    /* je ne sais pas ça arrive d'où le nom "k" */

    strong.k {
        display: block;
    }

    .infos-champs {
        strong {
            font-size: var(--font-size-h5);
            line-height: var(--font-line-height-h5);
        }

        padding-bottom: var(--spacing-large);
        margin-bottom: var(--spacing-huge);
        border-bottom: 1px solid var(--colors-ui-bordure-secondaire);

        .date-limite {
            margin-bottom: var(--spacing-big);
        }

        .date-limite, .montant {
            span {
                font-size: var(--font-size-medium);
                line-height: var(--font-line-height-medium);
            }
        }
    }

    .objectif {
        strong {
            display: block;
            font-weight: var(--font-weight-bold);
        }
    }

    /* Précaution, car sur l'API PP, il y a de paragraphes remplis de   */

    .description-longue {
        overflow: auto;
    }

    .description-gdbsma, .url-organisme-externe, .domaines-etudes, .commentaires-publics, .objectif {
        margin-bottom: var(--spacing-big);
    }

    .numero-reference {
        font-size: var(--font-singleline-medium);
        line-height: var(--font-line-height-tiny);
        color: var(--colors-ui-element-secondaire);
        margin-bottom: var(--spacing-huge);
        text-align: right;
    }

    .actions-container {
        margin-bottom: var(--spacing-large);
        display: flex;
        gap: var(--spacing-large);
    }

}

.tx-udembourses-searchresults {

    .tx-udembourses-filtre-vue {
        display: flex;
        gap: var(--spacing-small);
        align-items: self-start;
        margin-bottom: var(--spacing-huge);

        @media screen and (min-width: 768px) {
            align-items: center;
        }
    }

    .tx-udembourses-filtre-vue-label {
        font-size: var(--font-size-defaut);
        line-height: var(--font-line-height-defaut);
        font-weight: var(--font-weight-semi-bold);
    }

    .tx-udembourses-filtre-vue-options {
        display: flex;
        flex-direction: column;

        @media screen and (min-width: 768px) {
            flex-direction: row;
            gap: var(--spacing-medium);
        }

        .option {
            display: flex;
            align-items: center;
            gap: var(--spacing-tiny);

            label {
                display: flex;
                align-items: center;
                gap: var(--spacing-tiny);
                cursor: pointer;
                margin: 0;
            }

            .option-texte {
                font-size: var(--font-singleline-medium);
                line-height: var(--font-line-height-defaut);
            }

            input[type="radio"] {
                appearance: none;
                -webkit-appearance: none;
                flex-shrink: 0;
                margin: 0;
                cursor: pointer;
                width: var(--udem-input-radio-size);
                height: var(--udem-input-radio-size);
                border: 1px solid var(--udem-input-radio-border-color);
                border-radius: 50%;
                background: var(--udem-input-radio-bg-color);

                &:focus-visible {
                    outline: 1px solid var(--colors-ui-element-hover);
                    outline-offset: 1px;
                }

                &:checked {
                    background-color: var(--udem-input-radio-bg-checked-color);
                    border-color: var(--udem-input-radio-border-color);
                    background-image: radial-gradient(
                        circle,
                        var(--udem-input-radio-bullet-color) 0 var(--udem-input-radio-bullet-size),
                        transparent calc(var(--udem-input-radio-bullet-size) + 1%)
                    );
                }
            }
        }
    }

    @media screen and (min-width: 992px) {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: var(--spacing-medium);
        align-items: center;

        .tx-udembourses-searchresults-header {
            grid-column: 1;
        }

        .tx-udembourses-filtre-vue {
            grid-column: 2;
            margin-bottom: 0;
        }

        .tx-udembourses-searchresults-list {
            grid-column: 1 / -1;
            margin-top: var(--spacing-huge);
        }
    }
}

.tx-udembourses-searchresults.tx-udembourses-show--only-non-expiree
.tx-udembourses-searchresults-list > .expiree {
    display: none;
}

.tx-udembourses-searchresults.tx-udembourses-show--only-expired
.tx-udembourses-searchresults-list > :not(.expiree) {
    display: none;
}

.tx-udembourses-searchresults .number-of-results {
    font-size: var(--font-size-defaut);
    line-height: var(--font-line-height-defaut);
    margin-bottom: var(--spacing-small);

    @media screen and (min-width: 992px) {
        margin-bottom: 0;
    }

    span {
        font-weight: var(--font-weight-semi-bold);
    }
}

.frame.list_type-tx_udembourses {
    margin-bottom: var(--spacing-default);
}

/* Par défaut, les messages "vide" sont cachés.
   Ils ne s'affichent que si la vue correspondante est active. */
.tx-udembourses-empty-actives,
.tx-udembourses-empty-expired {
    display: none;
}

.tx-udembourses-searchresults.tx-udembourses-show--only-non-expiree
.tx-udembourses-empty-actives {
    display: block;
}

.tx-udembourses-searchresults.tx-udembourses-show--only-expired
.tx-udembourses-empty-expired {
    display: block;
}

/*******************
* Spinner
 **********************/

.tx-udembourses-searchresults {
    position: relative;
    min-height: 200px;
    margin-bottom: var(--spacing-huge);
}

.tx-udembourses-searchresults.is-loading > * {
    visibility: hidden;
}

.tx-udembourses-searchresults.is-loading::after {
    content: '';
    position: absolute;
    top: 150px;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: 0 0 0 -24px;
    border: 5px solid var(--udem-bleu-fonce);
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    to {
        transform: rotate(360deg);
    }
}