/** @module colors.scss */

$color-black: rgba(0, 0, 0, 1);
$color-grey: rgb(204, 204, 204);
$color-grey-masked: rgba(204, 204, 204, 0.8);
$color-white: rgba(255, 255, 255, 1);
$color-white-masked: rgba(255, 255, 255, 0.5);
$color-transparent: rgba(255, 255, 255, 0);

$color-main: rgb(25, 58, 74);
$color-main-masked: rgba(25, 58, 74, 0.8);
$color-main-text: $color-white;

$color-prime: rgb(180, 201, 83);
$color-prime-masked: rgba(180, 201, 83, 0.8);
$color-prime-text: $color-white;

$color-info: rgb(217, 174, 65);
$color-info-masked: rgba(217, 174, 65, 0.8);
$color-info-text: $color-main;

$color-warning: rgb(118, 47, 12);
$color-warning-masked: rgba(118, 47, 12, 0.8);
$color-warning-text: $color-white;

$color-menu: rgb(204, 204, 204);
$color-menu-masked: rgba(204, 204, 204, 0.8);
$color-menu-border: rgb(95, 112, 120);
$color-menu-text: $color-white;

$color-footer: rgb(37, 42, 42);
$color-footer-masked: rgba(37, 42, 42, 0.8);

$color-highlight: rgba(250, 250, 0, 0.3);
$color-highlight-masked: rgba(250, 250, 0, 0.1);

$color-error: rgb(214, 5, 30);
$color-error-masked: rgba(214, 5, 30, 0.8);

// "color" styles:

.color-black {
  color: $color-black;
}

.color-grey {
  color: $color-grey;
}

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

.color-main {
  color: $color-main;
}

.color-prime {
  color: $color-prime;
}

.color-info {
  color: $color-info;
}

.color-warning {
  color: $color-warning;
}

.color-menu {
  color: $color-menu;
}

.color-footer {
  color: $color-footer;
}

.color-highlight {
  color: $color-highlight;
}

.color-error {
  color: $color-error;
}

// gradient backgrounds:

.bg-white {
  background-color: $color-white;
  background: linear-gradient(
    135deg,
    $color-white 0%,
    $color-white-masked 100%
  ) !important;
}

.bg-grey {
  background-color: $color-grey;
  background: linear-gradient(
    135deg,
    $color-grey 0%,
    $color-grey-masked 100%
  ) !important;
}

.bg-main {
  background-color: $color-main;
  background: linear-gradient(
    135deg,
    $color-main 0%,
    $color-main-masked 100%
  ) !important;
}

.bg-prime {
  background-color: $color-prime;
  background: linear-gradient(
    135deg,
    $color-prime 0%,
    $color-prime-masked 100%
  ) !important;
  color: $color-white;
}

.bg-second {
  background-color: $color-info;
  background: linear-gradient(
    135deg,
    $color-info 0%,
    $color-info-masked 100%
  ) !important;
}

.bg-third {
  background-color: $color-warning;
  background: linear-gradient(
    135deg,
    $color-warning 0%,
    $color-warning-masked 100%
  ) !important;
}

.bg-menu {
  background-color: $color-menu;
  background: linear-gradient(
    135deg,
    $color-menu 0%,
    $color-menu-masked 100%
  ) !important;
}

.bg-footer {
  background-color: $color-footer;
  background: linear-gradient(
    135deg,
    $color-footer 0%,
    $color-footer-masked 100%
  ) !important;
}

.bg-highlight {
  background-color: $color-highlight;
  background: linear-gradient(
    135deg,
    $color-highlight 0%,
    $color-highlight-masked 100%
  ) !important;
}

.bg-error {
  background-color: $color-error;
  background: linear-gradient(
    135deg,
    $color-error 0%,
    $color-error-masked 100%
  ) !important;
  color: $color-white;
}