dropdown.scss

/*────────────────────────────────────
            Dropdown
────────────────────────────────────*/
.dropdown {
    font-family: var(--font-interface-theme);
    font-size: var(--font-scale-0-5);
    line-height: var(--line-height-1);
    width: 215px;
    padding: var(--scale-2-2) var(--scale-2-8) var(--scale-2-2) var(--scale-2-8);
    margin: var(--scale-2-2) 0;
    transition: var(--duration-fast-1) var(--motion-smooth);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 24 24' width='100%25' height='100%25'%3E%3Cpath d='M18.71,8.21a1,1,0,0,0-1.42,0l-4.58,4.58a1,1,0,0,1-1.42,0L6.71,8.21a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41l4.59,4.59a3,3,0,0,0,4.24,0l4.59-4.59A1,1,0,0,0,18.71,8.21Z'/%3E%3C/svg%3E%0A");
}

.theme-light .dropdown {
    color: var(--color-l-gray-80);
    background-color: var(--color-l-whiter);
    border: 1px solid rgba(100, 100, 100, 0.5);
    border-radius: var(--scale-2-2);
    box-shadow: 0px -2px 0px 0px rgba(100, 100, 100, 0.1) inset, 0px 2px 4px 0px rgba(100, 100, 100, 0.1);
}

.theme-light .dropdown:hover {
    background-color: var(--color-l-gray-20);
    transition: var(--duration-fast-1) var(--motion-delay);
}

.theme-dark .dropdown {
    color: var(--color-d-gray-10);
    background-color: var(--color-d-gray-90);
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.15) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.theme-dark .dropdown:hover {
    background-color: var(--color-d-blacker);
    transition: var(--duration-fast-1) var(--motion-delay);
}