@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

body {
    font-family: 'Google Sans', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.phone-frame {
    aspect-ratio: 9/19.5;
    border-radius: 40px;
    transition: all 0.3s ease;
}

.scrollbar-hide {
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.icon-sun,
.icon-moon {
    display: none;
}

html.dark .icon-sun {
    display: inline-flex;
}

html:not(.dark) .icon-moon {
    display: inline-flex;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

@media (pointer: fine) {
    [data-drag-scroll] {
        cursor: grab;
    }

    [data-drag-scroll].is-dragging {
        cursor: grabbing;
        user-select: none;
    }
}

#station-suggestions:empty,
#from-suggestions:empty,
#to-suggestions:empty,
#station-picked:empty {
    display: none;
}