#sorting {
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 0 0 1em;
    position: relative;
}

#sorting-img {
    height: 30%;

    &:hover {
        cursor: pointer;
    }

}

#sorting-list {
    visibility: hidden;

    position: absolute;
    z-index: 2;

    top: 20vh;
    left: -5em;
    width: 14em;
    max-height: 60vh;
    overflow: auto;

    padding-left: 0;
    list-style: none;


    li {
        position: relative;
        background-color: var(--black-color);
        color: var(--white-color);
        border-bottom: 2px solid black;
        padding: 1em;
        font-weight: bold;
        font-size: 1em;

        img {
            display: inline-block;
            position: absolute;
            height: 1.5em;
            right: 1em;
            transition: transform 0.3s ease;
        }

        .asc {
            filter: hue-rotate(100deg);
            transform: rotate(180deg);

            &:hover {
                filter: hue-rotate(0);
            }
        }

        .desc {
            transform: rotate(0);

            &:hover {
                filter: hue-rotate(100deg);
            }
        }
    }

    li.active {
        background-color: var(--green-color);
        color: var(--white-color);
    }

    li:hover {
        background-color: var(--yellow-color);
        color: var(--black-color);
        cursor: pointer;
        font-weight: bold;
    }

}


@media (min-width: 2500px) {
    #sorting-list {
        right: 5vw;
        width: 33em;

        li {
            font-size: 2em;
        }
    }


}


@media (min-width: 3000px) {
    #sorting-list {
        right: 8vw;
        width: 41em;

        li {
            font-size: 3em;
        }
    }


}