@tailwind base;
@tailwind components;
@tailwind utilities;

@import '~@vue/ui/dist/vue-ui.css'

@import 'imports'
@import 'transitions'

@font-face
  font-family 'Roboto'
  font-style normal
  font-weight 400
  src local('Roboto'), local('Roboto-Regular'), url(../Roboto-Regular.woff2) format('woff2')

@font-face
  font-family 'Roboto Mono'
  font-style normal
  font-weight 400
  src local('Roboto Mono'), local('Roboto-Mono'), url(../Roboto-Mono.ttf) format('truetype')

html, body
  margin 0
  padding 0
  font-family Roboto
  font-size 16px
  color #444
  height 100%

body
  overflow hidden

#app
  width: 100%
  height: 100%

button:focus
  outline none

.selectable-item
  background-color $background-color
  &:hover
    background-color $hover-color
  &.selected,
  &.active
    background-color $active-color
    color #fff
    .item-name,
    .arrow
      color #fff

  .vue-ui-dark-mode &
    background-color $dark-background-color
    &:hover
      background-color $dark-hover-color
      .arrow
        color theme('colors.gray.600')
    &.selected,
    &.active
      color #fff
      background-color $active-color

.vue-ui-icon svg
  fill currentColor

// Tooltips

.keyboard
  display inline-block
  min-width 22px
  text-align center
  background rgba($grey, .3)
  padding 2px 4px 0
  border-radius 3px
  margin-bottom 6px
  box-shadow 0 3px 0 rgba($grey, .2)
  .vue-ui-dark-mode &
    background rgba($grey, .9)
    box-shadow 0 3px 0 rgba($grey, .6)

.mono
  font-family Menlo, Consolas, monospace

.v-popper__popper.v-popper--theme-tooltip
  pointer-events none
  font-size 12px

  .vue-ui-icon
    width 16px
    height @width
    vertical-align middle

.vue-ui-dark-mode .v-popper__popper.v-popper--theme-tooltip .vue-ui-icon svg
  fill #666

.v-popper__popper.v-popper--theme-dropdown .v-popper__inner
  max-height calc(100vh - 32px - 8px - 4px)
  overflow-y auto

.scroll-smooth
  scroll-behavior smooth

.grayscale
  filter grayscale(1)

.right-icon-reveal:not(:hover)
  .vue-ui-icon.right
    opacity 0

.v-popper--theme-tooltip
  .vue-ui-dark-mode &
    .v-popper__arrow-inner,
    .v-popper__arrow-outer
      border-color $vue-ui-white