/* Background color */

.bg-white {
  background-color: $color-bg;
}

.bg-primary {
  background-color: $color-primary;

  &-light{
    background-color: $color-primary-light;
  }

  &-dark{
    background-color: $color-primary-dark;
  }
}

.bg-danger {
  background-color: $color-danger;

  &-light {
    background-color: $color-danger-light;
  }

  &-lighter {
    background-color: $color-danger-lighter;
  }
}

.bg-success {
  background-color: $color-success;

  &-light {
    background-color: $color-success-light;
  }
}


.bg-warning {
  background-color: $color-warning;

  &-light {
    background-color: $color-warning-light;
  }
}


.bg-gray {
  background-color:  $color-gray;

  &-lighter {
    background-color: $color-gray-lighter;
  }

  &-light {
    background-color: $color-gray-light;
  }

  &-dark {
    background-color:  $color-gray-dark;
  }

  &-darker {
    background-color:  $color-gray-darker;
  }
}

/* Borders */
.border-primary {
  border-color: $color-primary;

  &-light {
    border-color: $color-primary-light;
  }

  &-dark {
    border-color: $color-primary-dark;
  }
}

.border-danger {
  border-color: $color-danger;

  &-light {
    border-color: $color-danger-light;
  }

  &-lighter {
    border-color: $color-danger-lighter;
  }
}

.border-success {
  border-color: $color-success-light;

  &-light {
    border-color: $color-success-light;
  }
}

.border-gray {
  border: 2px solid $color-gray;

  &-lighter {
    border: 2px solid $color-gray-lighter;
  }

  &-light {
    border: 2px solid $color-gray-light;
  }

  &-dark {
    border: 2px solid $color-gray-dark;
  }

  &-darker {
    border: 2px solid $color-gray-darker;
  }
}

/* Typography */
.text-gray {
  color:  $color-gray;

  &-dark {
    color:  $color-gray-dark;
  }
}

.text-danger {
  color: $color-danger;
}

.text-primary {
  color: $color-primary;
}

.text-success {
  color: $color-success;
}

.text-bold {
  font-weight: bold;
}

.text-14 {
  font-family: $font-family-primary;
  font-size: 14px;
}

.text-13 {
  font-family: $font-family-primary;
  font-size: 13px;
}

.text-12 {
  font-family: $font-family-primary;
  font-size: 12px;
}

.text-11 {
  font-family: $font-family-primary;
  font-size: 11px;
}

.text-semibold {
  font-family: $font-family-semibold;
}