@import 'variables'
@import 'colours'
@import 'mixins'

.section
  border: 1px solid $border-default
  border-radius: $border-radius
  padding: 10px 20px

  h3
    color: $text-secondary
    font-size: 13px
    font-weight: $weight-medium
    margin: 5px 0

    &.is-centered
      display: block
      text-align: center

.card
  width: 100%
  height: 100px
  position: relative
  border: 1px solid $border-default
  border-radius: $border-radius

  &.is-red
    .card-bg
      i
        color: $red-400

        &.is-overlay
          color: $red-100

    .card-content
      .usage
        color: $red

  &.is-yellow
    .card-bg
      i
        color: $yellow-400

        &.is-overlay
          color: $yellow-200

    .card-content
      .usage
        color: $yellow


  .card-bg
    position: absolute
    bottom: 10px
    right: 10px
    width: 90px
    height: 70px

    &.has-less-width
      width: 75px

    &.has-less-width-20
      width: 60px

    i
      color: $green-400
      font-size: 70px
      display: block
      position: absolute

      &.is-overlay
        color: $green-200
        overflow: hidden
        height: 0
        width: 100%

  .card-content
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    display: block
    padding: 15px 30px

    .title, .num, .percent
      display: block
      margin-bottom: 7px

    .title
      color: $text-secondary
      font-weight: $weight-normal
      font-size: 13px

    .num
      color: $text-secondary
      font-weight: $weight-normal
      font-size: 22px

    .usage
      color: $green
      font-weight: $weight-medium
      font-size: 12px
      display: flex
      align-items: center

.bar-chart-placeholder
  width: 100%
  height: 320px
  display: flex
  align-items: center
  justify-content: center

  .message
    font-size: 15px
    color: $text-secondary
    font-weight: $weight-normal

.sub-links
  display: block

  .sub-link
    display: inline-block
    margin: 5px
    cursor: pointer
    color: $text-primary

    &.is-active
      color: $green

.scheduler-help-icon
  color: $text-button
