index-main/assets/css/components/_dropdown.scss

.dropdown {
    position: relative;
    display: inline-block;

    &__trigger {
        cursor: pointer;
    }

    &__content {
        position: absolute;
        top: 100%;
        left: 0;

        margin-top: var(--padding-inner);
        background-color: var(--color-bg);
        border: var(--border);
        border-radius: var(--radius-btn);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
        z-index: calc(var(--z-header) - 100);

        &::before {
            content: "◀";
            transform: rotate(90deg);
            font-size: 14px;
            position: absolute;
            top: -13px;
            left: 16px;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: var(--padding-inner);
            min-width: 180px;
        }

        a,
        button {
            display: block;
            width: 100%;
            padding: 0.75em 1ch;
            font-size: var(--fs-small);
            text-align: left;
            text-decoration: none;
            color: var(--color-txt);
            background: none;
            border: none;
            cursor: pointer;

            &:hover {
                background-color: var(--grey-800);
            }
        }
    }

    // Positionnement par défaut : sous le bouton, aligné à gauche
    // Variante : aligné à droite
    &--align-right .dropdown__content {
        left: auto;
        right: 0;

        &::before {
            left: auto;
            right: 16px;

        }
    }

    &.is-open {
        .dropdown__content {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
    }

    &--position-mobile .dropdown__content {
        background-color: red;
    }

    // PANEL
    // &--position-mobile .dropdown__content {
    //         top: auto;
    //         bottom: calc(var(--h-block) + var(--padding-inner)*2);
    //         left: auto;
    //         right: 0;
    //         margin-top: 0;
    //         margin-left: 4px;

    //         &::before{
    //             font-family: Arial;
    //             content: "◀";
    //             transform: rotate(-90deg);
    //             font-size: 14px;
    //             position: absolute;
    //             top: auto;
    //             bottom: -13px;
    //             left: auto;
    //             right: 10%;
    //         }
    //     }



    //     &--position-mobile.is-open {
    //         .dropdown__content {
    //             transform: translateX(0);
    //         }
    //     }




    @media #{$small-up} {
        &--position-panel .dropdown__content {
            top: auto;
            bottom: 0;
            left: calc(100% + var(--padding-inner));
            margin-top: 0;
            margin-left: 4px;

            &::before {
                font-family: Arial;
                content: "◀";
                transform: rotate(0deg);
                font-size: 14px;
                position: absolute;
                top: auto;
                bottom: 4px;
                left: -11px;
            }
        }



        &--position-panel.is-open {
            .dropdown__content {
                transform: translateX(0);
            }
        }

    }


    @media #{$x-small} {

        .dropdown__content {
            width: calc(100vw - var(--padding-body)*2);
            left: auto;
            right: 0;

            .modal--share {
                width: 100%;
            }
        }


    }

}



#bottom-bar {


    .dropdown .dropdown__content {
        top: auto;
        bottom: calc(var(--h-block) + var(--padding-inner)*2);
        left: auto;
        right: 0;
        margin-top: 0;
        margin-left: 4px;

        &::before {
            font-family: Arial;
            content: "◀";
            transform: rotate(-90deg);
            font-size: 14px;
            position: absolute;
            top: auto;
            bottom: -13px;
            left: auto;
            right: 10%;
              @media #{$x-small} {
                  left: 20%;
            right: auto;
                }

        }

    }



    .dropdown.is-open {
        .dropdown__content {
            transform: translateX(0);
        }
    }
}