@import '~primeflex/src/_variables'
@import '~primeflex/src/_grid'
@import '~primeflex/src/_formlayout'
@import '~primeflex/src/_display'
@import '~primeflex/src/_text'
@import '~primeflex/src/flexbox/_flexbox'
@import '~primeflex/src/_spacing'
@import '~primeflex/src/_elevation'

@import '~primevue/resources/themes/fluent-light/theme.css'
@import '~primevue/resources/primevue.min.css'
@import '~primeicons/primeicons.css'

@import 'layout'

@import "components/index"

body
    height: 100%
    margin: 0
    background: #f8f9fa

#app
    font-family: Avenir, Helvetica, Arial, sans-serif
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale
    text-align: center
    color: #2c3e50
    display: flex
    flex-direction: column
    min-height: 100vh

#nav
    padding: 30px

    a
        font-weight: bold
        color: #2c3e50

        &.router-link-exact-active
            color: #42b983

// Temp location
.box
    cursor: pointer
    margin-left: 1rem
    margin-bottom: 1rem
    background-color: var(--surface-e)
    text-align: center
    padding: 1rem
    border-radius: 4px

    &.selected
        border-color: dodgerblue

    &.is-plain
        cursor: default

    &.is-highlighted
        border-color: #50b0ff

    &.auto
        width: auto
        min-width: 100px

.searcher.box
    align-items: flex-start

.flex-row
    display: flex
    flex-direction: row

.flex-column
    display: flex
    flex-direction: column

.flex-center
    display: flex
    align-items: center
    justify-content: center

.searcher-link
    &:hover
        color: dodgerblue
        cursor: pointer

.searchers-row
    background: #f3f3f3
    padding: 1rem
    border-radius: 5px
    margin-bottom: 1rem