@import '~prismjs/themes/prism.css'
@import 'transitions'

html,
body,
#app,
.page
  height 100%

h2
  line-height 32px

ul
  padding-left $padding-item

.empty-icon
  display block
  margin 24px auto
  width 48px
  height @width

.actions-bar
  padding $padding-item
  h-box()
  box-center()
  position relative

  > *
    space-between-x($padding-item)

  &.space-between
    justify-content space-between
  &.center
    justify-content center
  &.start
    justify-content flex-start
  &.end
    justify-content flex-end
  &.fill
    > *
      flex auto 1 1
      width 0

.cta-text
  margin $padding-item
  color $color-text-light
  font-size 18px

.list-item
  list-item()

.list-header
  padding $padding-item
  display flex
  align-items center
  justify-content center

  .search
    flex 1

.card
  background $vue-ui-color-light
  border-radius ($br * 2)
  box-shadow 0 4px 15px rgba(black, .05)
  .vue-ui-dark-mode &
    background $vue-ui-color-darker

ansi-colors('black', $vue-ui-color-dark)
ansi-colors('red', $vue-ui-color-danger)
ansi-colors('green', $vue-ui-color-primary)
ansi-colors('yellow', $vue-ui-color-warning)
ansi-colors('blue', $md-blue)
ansi-colors('magenta', $vue-ui-color-accent)
ansi-colors('cyan', $vue-ui-color-info)
ansi-colors('white', $vue-ui-color-light)
.vue-ui-dark-mode
  ansi-colors('black', $vue-ui-color-dark-neutral)
  ansi-colors('magenta', lighten($vue-ui-color-accent, 60%))
  ansi-colors('white', $vue-ui-color-light-neutral)

.vue-ui-icon.separator
  width 6px
  height @width
  h-box()
  box-center()
  margin $padding-item
  svg
    fill rgba($vue-ui-color-dark, .2)
    .vue-ui-dark-mode &
      fill rgba($vue-ui-color-light, .2)

.ais-index
  height 100%
  v-box()
  align-items stretch

.ais-results-box
  flex 100% 1 1
  height 0
  overflow-x hidden
  overflow-y auto
  margin $padding-item 0

.ais-no-results
  margin-top 42px

.ais-highlight
  em
    font-style normal
    background lighten($vue-ui-color-primary, 80%)
    color darken($vue-ui-color-primary, 10%)
    padding 0 2px
    border-radius $br
    .vue-ui-dark-mode &
      background $vue-ui-color-dark
      color $vue-ui-color-primary

.ais-logo
  max-width 150px
  .vue-ui-dark-mode &
    filter brightness(200%)

.no-padding-x
  padding-left 0
  padding-right 0
.no-padding-y
  padding-top 0
  padding-bottom 0
.no-margin-x
  margin-left 0
  margin-right 0
.no-margin-y
  margin-top 0
  margin-bottom 0

.fill-height
  height 100%

.blank-icon
  width 24px
  height @width
  display block
  margin auto
  svg
    fill rgba($vue-ui-color-dark, .3)

.pane-toolbar
  h-box()
  align-items center
  padding 6px 6px 6px $padding-item
  > :not(.separator)
    space-between-x(6px)
  > * + .separator
    margin-left 6px
  .title
    flex 100% 1 1
    width 0
    ellipsis()

  > .vue-ui-switch,
  > .vue-ui-button:not(.icon-button),
  .dropdown-trigger > .vue-ui-button:not(.icon-button)
    padding 0 8px

  > .vue-ui-switch
    font-size 14px

.dropdown-separator
  height 1px
  margin ($padding-item / 2) 0
  background rgba($vue-ui-color-dark, .05)
  .vue-ui-dark-mode &
    background rgba($vue-ui-color-dark-neutral, .2)

.vue-ui-modal
  &.anchor
    align-items flex-start
    .shell
      margin-top 42px

// Syntax highlighting
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string
  background none !important

.vue-ui-dark-mode
  .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted
    color lighten(#905, 40%)

  .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted
    color lighten(#690, 40%)

  .token.atrule, .token.attr-value, .token.keyword
    color lighten(#07a, 40%)

  .token.function, .token.class-name
    color lighten(#dd4a68, 30%)

  .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string
    color lighten(#9a6e3a, 20%)

  .token.punctuation
    color lighten(#999, 20%)

// Resizing

.resize-handle
  position absolute
  width 12px
  height @width
  border-radius 50%
  background $vue-ui-color-primary

  $halfWidth = @width / 2
  $halfHeight = @height / 2

  &:hover
    background $vue-ui-color-primary
  &.top,
  &.top-left,
  &.top-right
    top -($halfHeight)
  &.bottom,
  &.bottom-left,
  &.bottom-right
    bottom -($halfHeight)
  &.left,
  &.top-left,
  &.bottom-left
    left -($halfWidth)
  &.right,
  &.top-right,
  &.bottom-right
    right -($halfWidth)
  &.top,
  &.bottom
    left 'calc(50% - %s)' % $halfWidth
    cursor ns-resize
  &.left,
  &.right
    top 'calc(50% - %s)' % $halfHeight
    cursor ew-resize
  &.top-left,
  &.bottom-right
    cursor nwse-resize
  &.top-right,
  &.bottom-left
    cursor nesw-resize

.vue-ui-select
  width 100%