@import 'flive-vars';

// background variants
.background-color-none {
  background-color: transparent;
}
.background-color-white {
  background: #fff;
}
.background-color-xx-light-grey {
  background-color: $xx-light-grey;
}
.background-color-x-light-grey {
  background-color: $x-light-grey;
}
.background-color-light-grey {
  background-color: $light-grey;
}
.background-color-medium-light-grey {
  background-color: $medium-light-grey;
}
.background-color-grey {
  background-color: $grey;
}
.background-color-medium-dark-grey {
  background-color: $medium-dark-grey;
}
.background-color-dark-grey {
  background-color: $dark-grey;
}
.background-color-black-grey {
  background-color: $black-grey;
}
.background-color-night-blue {
  background: $flive-night-blue;
  color: #fff;
}
.background-color-blue {
  background: $flive-blue;
  color: #fff;
}

.box-shadow {
  box-shadow: 0px 0 1rem 0px rgba(0, 0, 0, 0.05)
}

// border variants
.border-color-white {
  border-color: #fff;
}
.border-color-xx-light-grey {
  border-color: $xx-light-grey;
}
.border-color-x-light-grey {
  border-color: $x-light-grey;
}
.border-color-light-grey {
  border-color: $light-grey;
}
.border-color-medium-light-grey {
  border-color: $medium-light-grey;
}
.border-color-grey {
  border-color: $grey;
}
.border-color-medium-dark-grey {
  border-color: $medium-dark-grey;
}
.border-color-dark-grey {
  border-color: $dark-grey;
}
.border-color-black-grey {
  border-color: $black-grey;
}
.border-color-night-blue {
  border-color: $flive-night-blue;
}
.border-color-blue {
  border-color: $flive-blue;
}

// color variants
.color-white {
  color: #fff;
}
.color-xx-light-grey {
  color: $xx-light-grey;
}
.color-x-light-grey {
  color: $x-light-grey;
}
.color-light-grey {
  color: $light-grey;
}
.color-medium-light-grey {
  color: $medium-light-grey;
}
.color-grey {
  color: $grey;
}
.color-medium-dark-grey {
  color: $medium-dark-grey;
}
.color-dark-grey {
  color: $dark-grey;
}
.color-black-grey {
  color: $black-grey;
}
.color-night-blue {
  color: $flive-night-blue;
}
.color-blue {
  color: $flive-blue;
}


// old props background
.old-background-none {
  background: none;
}
.old-background-white {
  background: #fff;
}
.old-background-grey-medium {
  background: $flive-medium-grey;
}
.old-background-grey-light {
  background: $flive-light-grey;
}
.old-background-night-blue {
  background: $flive-night-blue;
  color: #fff;
}
.old-background-blue {
  background: $flive-blue;
  color: #fff;
}
// old props border
.old-border-grey {
  border: 1px solid $flive-dark-grey;
}
.old-border-grey-light {
  border: 1px solid $flive-medium-grey;
}
.old-border-night-blue {
  border: 1px solid $flive-night-blue;
}
.old-border-blue {
  border: 1px solid $flive-blue;
}