@use "sass:color"
@use "colors" as *
@use "@blueprintjs/colors/lib/scss/colors" as *
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Source+Sans+Pro")

*
  box-sizing: border-box

// Colors taken primarily from blueprintjs v4
// See https://blueprintjs.com/docs/#core/colors
:root
  @each $name, $color in $colors
    --#{$name}: #{$color}

html, body
  height: 100vh
  height: -webkit-fill-available

.bp5-input
  box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2)

.bp5-button
  color: var(--text-color)

.bp5-control
  color: var(--text-subtle-color) !important

body
  color: var(--text-color)
  margin: 0
  padding: 0
  font-family: 'Source Sans Pro', sans-serif

  &.bp5-dark
    color-scheme: dark
    color: $dark-text
    background-color: $dark-background
    // each item in color map
    @each $name, $color in $dark-colors
      --#{$name}: #{$color}

    .bp5-input
      &::placeholder
        color: var(--secondary-color)
        box-shadow: 0 0 0 0 color.change($light-gray3, $alpha: 0), 0 0 0 0 color.change($light-gray3, $alpha: 0), inset 0 0 0 1px color.change($light-gray1, $alpha: 0.15), inset 0 1px 1px color.change($light-gray1, $alpha: 0.2)

.bp5-card, .bp5-navbar
  border-radius: 4px
  background-color: var(--panel-background-color)
  box-shadow: 0 0 0 1px var(--card-shadow-color)