//
// BACKGROUND COLOR
// =============================================================================
.bg-blue {
  background: @beyerdynamic-blue;
}

.bg-champagne {
  background: @champagne;
}

.bg-champagne-25 {
  background: @champagne-25;
}

.bg-black {
  background: @black;
}

.bg-black-80 {
  background: @black-80;
}

.bg-black-60 {
  background: @black-60;
}

.bg-black-40 {
  background: @black-40;
}

.bg-black-20 {
  background: @black-20;
}

.bg-white {
  background: @white;
}

.bg-secondary-red {
  background: @secondary-red;
}

.bg-secondary-green {
  background: @secondary-green;
}

.bg-secondary-yellow {
  background: @secondary-yellow;
}

.bg-secondary-blue {
  background: @beyerdynamic-blue;
}

.bg-secondary-champagne {
  background: @champagne;
}

.bg-secondary-black {
  background: @black;
}

.bg-secondary-white {
  background: @white;
}

//
// BORDERS
// =============================================================================
.border-blue {
  border: 1px solid @beyerdynamic-blue;
}

.border-champagne {
  border: 1px solid @champagne;
}

.border-champagne-25 {
  border: 1px solid @champagne-25;
}

.border-black {
  border: 1px solid @black;
}

.border-black-80 {
  border: 1px solid @black-80;
}

.border-black-60 {
  border: 1px solid @black-60;
}

.border-black-40 {
  border: 1px solid @black-40;
}

.border-black-20 {
  border: 1px solid @black-20;
}

.border-white {
  border: 1px solid @white;
}

.border-secondary-red {
  border: 1px solid @secondary-red;
}

.border-secondary-green {
  border: 1px solid @secondary-green;
}

.border-secondary-yellow {
  border: 1px solid @secondary-yellow;
}

//
// TEXT COLOR
// =============================================================================
.color-black {
  color: @black;

  hr {
    background: @black !important;
  }

  beyer-icon {
    svg {
      * {
        fill: @black !important;
      }
    }
  }
}

.color-white {
  color: @white;

  hr {
    background: @white !important;
  }

  beyer-icon {
    svg {
      * {
        fill: @white !important;
      }
    }
  }
}

//
// OUTLINE COLOR
// =============================================================================
.outline-blue {
  background: transparent;
  border: 1px solid @beyerdynamic-blue !important;
  color: @beyerdynamic-blue !important;
}

.outline-champagne {
  background: transparent;
  border: 1px solid @champagne !important;
  color: @champagne !important;
}

.outline-champagne-25 {
  background: transparent;
  border: 1px solid @champagne-25 !important;
  color: @champagne-25 !important;
}

.outline-black {
  background: transparent;
  border: 1px solid @black !important;
  color: @black !important;
}

.outline-white {
  background: transparent;
  border: 1px solid @white !important;
  color: @white !important;
}