@require './_colors'

// Theme
// ============================================================
$body-font-family := 'Roboto', sans-serif
$font-size-root := 14px
$line-height-root := 1.5

// Material Design - https://material.io/guidelines/style/color.html#color-usability
// ============================================================
$material-light := {
  status-bar: {
    regular: $grey.lighten-2,
    lights-out: rgba($shades.white, .7)
  },
  app-bar: $grey.lighten-4,
  background: $grey.lighten-5,
  cards: $shades.white,
  chips: {
    background: $grey.lighten-2,
    color: rgba($shades.black, .87)
  },
  dividers: rgba($shades.black, .12),
  text: {
    theme: $shades.white,
    primary: rgba($shades.black, .87),
    secondary: rgba($shades.black, .54),
    disabled: rgba($shades.black, .38),
    link: $blue.darken-2,
    link-hover: $grey.darken-3
  },
  icons: {
    active: rgba($shades.black, .54),
    inactive: rgba($shades.black, .38)
  },
  inputs: {
    box: rgba($shades.black, .04),
    solo-inverted: rgba($shades.black, .16),
    solo-inverted-focused: $grey.darken-3,
    solo-inverted-focused-text: $shades.white
  },
  buttons: {
    disabled: rgba($shades.black, .26),
    focused: rgba($shades.black, .12),
    focused-alt: rgba($shades.white, .6),
    pressed: rgba(#999, .4)
  },
  expansion-panels: {
    focus: $grey.lighten-3
  },
  list-tile: {
    hover: rgba($shades.black, .04)
  },
  selection-controls: {
    thumb: {
      inactive: $grey.lighten-5,
      disabled: $grey.lighten-1
    },
    track: {
      inactive: rgba($shades.black, .38),
      disabled: rgba($shades.black, .12)
    }
  },
  slider: {
    active: rgba($shades.black, .38),
    inactive: rgba($shades.black, .26),
    disabled: rgba($shades.black, .26),
    discrete: $shades.black
  },
  tabs: {
    active: rgba($shades.black, .87)
  },
  text-fields: {
    box: rgba($shades.black, .06),
    box-hover: rgba($shades.black, .12)
  },
  input-bottom-line: rgba($shades.black, .42),
  stepper: {
    active: rgba($shades.white, 1),
    completed: rgba($shades.black, 0.87),
    hover: rgba($shades.black, 0.54)
  },
  table: {
    active: $grey.lighten-4
    hover: $grey.lighten-3
  },
  picker: {
    body: $shades.white,
    clock: $grey.lighten-2,
    indeterminateTime: $grey.lighten-1,
    title: $grey.lighten-2
  },
  bg-color: $shades.white
  fg-color: $shades.black
  text-color: $shades.black
  primary-text-percent: .87
  secondary-text-percent: .54
  disabledORhints-text-percent: .38
  divider-percent: .12
  active-icon-percent: .54
  inactive-icon-percent: .38
  calendar: {
    background-color: #fff
    outside-background-color: #f7f7f7
    line-color: #e0e0e0
    interval-color: $grey.darken-3
    interval-line-color: $grey.lighten-2
    text-color: #000
    past-color: rgba(#000, .38)
  }
}

$material-dark := {
  status-bar: {
    regular: $shades.black,
    lights-out: rgba($shades.black, .2)
  },
  app-bar: $grey.darken-4,
  background: #303030,
  cards: $grey.darken-3,
  chips: {
    background: #555,
    color: $shades.white
  },
  dividers: rgba($shades.white, .12),
  text: {
    theme: $shades.white,
    primary: $shades.white,
    secondary: rgba($shades.white, .70),
    disabled: rgba($shades.white, .50),
    link: $blue.accent-1,
    link-hover: $grey.lighten-3
  },
  icons: {
    active: $shades.white,
    inactive: rgba($shades.white, .5)
  },
  inputs: {
    box: $shades.white,
    solo-inverted: rgba($shades.white, .16),
    solo-inverted-focused: $shades.white,
    solo-inverted-focused-text: $material-light.text.primary
  },
  list-tile: {
    hover: rgba($shades.white, .08)
  },
  buttons: {
    disabled: rgba($shades.white, .3),
    focused: rgba($shades.white, .12),
    focused-alt: rgba($shades.white, .1),
    pressed: rgba(#ccc, .25)
  },
  expansion-panels: {
    focus: #494949
  },
  selection-controls: {
    thumb: {
      inactive: $grey.lighten-1,
      disabled: $grey.darken-3
    },
    track: {
      inactive: rgba($shades.white, .3),
      disabled: rgba($shades.white, .1)
    }
  },
  slider: {
    active: rgba($shades.white, .3),
    inactive: rgba($shades.white, .2),
    disabled: rgba($shades.white, .2),
    discrete: $shades.white
  },
  tabs: {
    active: $shades.white
  },
  text-fields: {
    box: rgba($shades.black, .1),
    box-hover: rgba($shades.black, .2),
    box-focus: rgba($shades.black, .3)
  },
  input-bottom-line: rgba($shades.white, .7),

  stepper: {
    active: rgba($shades.white, 1),
    completed: rgba($shades.white, 0.87),
    hover: rgba($shades.white, 0.75)
  },
  table: {
    active: #505050
    hover: $grey.darken-2
  },
  picker: {
    body: $grey.darken-3,
    clock: $grey.darken-2,
    indeterminateTime: $grey.darken-1,
    title: $grey.darken-2
  },
  bg-color: #303030
  fg-color: $shades.white
  text-color: $shades.white
  primary-text-percent: 1
  secondary-text-percent: .70
  disabledORhints-text-percent: .50
  divider-percent: .12
  active-icon-percent: 1
  inactive-icon-percent: .50
  calendar: {
    background-color: #303030
    outside-background-color: #202020
    line-color: $grey.base
    interval-color: $grey.lighten-3
    interval-line-color: $grey.darken-2
    text-color: #fff
    past-color: rgba(#fff, .50)
  }
}

// Default Material Theme
// ============================================================
$material-theme := $material-light
$material-twelve-percent-light := rgba($material-dark.fg-color, $material-dark.divider-percent)
$material-twelve-percent-dark := rgba($material-light.fg-color, $material-light.divider-percent)


// Theme
// ============================================================
$body-bg-light := $material-light.background
$body-bg-dark := $material-dark.background
$body-color-light := rgba($material-dark.text-color, $material-dark.primary-text-percent)
$body-color-dark := rgba($material-light.text-color, $material-light.primary-text-percent)
$color-theme := rgba($material-theme.text-color, $material-theme.primary-text-percent)