//
//theme
//

.dark {
  &,&.app,.bg {
    background-color: $dark
  }
  .box,.white {
    background-color: $dark-box
  }

  &-light,&-white {
    color: rgba(0,0,0,.87);
  }

  &-light {
    background-color: $light
  }
  .lt,&.lt {
    background-color: $dark-lt
  }

  .dk,&.dk {
    background-color: $dark-dk
  }

}

.black {
  &,&.app, .bg{
    background-color: $black
  }

  .box,.white {
    background-color: $black-box
  }
  .lt,&.lt {
    background-color: $black-lt
  }

  .dk,&.dk {
    background-color: $black-dk
  }

}

.grey {
  &,&.app,.bg{
    background-color: $grey
  }

  .box,.white {
    background-color: $grey-box
  }

  .lt,&.lt {
    background-color: $grey-lt
  }

  .dk,&.dk{
    background-color: $grey-dk
  }
}

.black,.dark,.grey {
  color: rgba(225,235,245,.87);
  .form-control {
    background: 0 0;
    color: inherit;

    &:focus {
      border-color: rgba(120,130,140,.13)
    }
  }

  .input-group-btn {
    .btn {
      background-color: rgba(120,130,140,.065)!important;
      color: inherit!important;
    }
  }

  .list-group {
    background-color: transparent
  }
}

.lter {
  background-color: rgba($white,.15)
}

.dker {
  background-color: rgba(22,32,42,.15)
}

.light {
  background-color: $light
}

.dark-white,.white {
  background-color: $white
}

.color {
  &-text {
    background-color: $text-color;
  }
  &-disabled {
    background-color: rgba(220,220,220,.4);
  }
  &-light {
    background-color: #EBF3F5;
  }
  &-lighter {
    background-color: #F2FAFB;
  }
  &-lightest {
    background-color: #F4F8F9;
  }
}

.gray {
  background-color:$gray;
  &._10 {
    background-color: rgba(123,152,167,.1);
  }
  &._20 {
    background-color: rgba(123,152,167,.2);
  }
  &._32 {
    background-color: rgba(123,152,167,.32);
  }
  &._40 {
    background-color: rgba(123,152,167,.4);
  }
  &._70 {
    background-color: rgba(123,152,167,.7);
  }
}

.normal {
  color:$gray;
  background-color: #E9F0F1;
}

@each $key,$val in $status-palette {
  .#{$key} {
    color:$white;
    background-color: $val;

    .lt,&.lt {
      background-color: map-get($all-status-palette,#{$key}-lt);
    }
    .dk,&.dk {
      background-color: map-get($all-status-palette,#{$key}-dk);
    }
    .bg,&.bg {
      color: map-get($all-status-palette,#{$key}-dk);
      background-color: map-get($all-status-palette,#{$key}-bg);
    }
  }
}

.white-overlay {
  background-color: rgba(255,255,255,.85)
}

.black-overlay {
  background-color: rgba(0,0,0,.85)
}