$mat-primary: (
  100: white,
  500: #0085db,
  700: #0085db,
  contrast: (
    100: white,
    500: white,
    700: white,
  ),
);
$mat-secondary: (
  100: white,
  500: #707a82,
  700: #707a82,
  contrast: (
    100: white,
    500: white,
    700: white,
  ),
);

$mat-warn: (
  100: #FDEDE8,
  500: #fa896b,
  700: #f3704d,
  contrast: (
    100: white,
    500: white,
    700: white,
  ),
);

$theme-primary: mat.m2-define-palette($mat-primary, 500);
$theme-accent: mat.m2-define-palette($mat-secondary, 500);
$theme-warn: mat.m2-define-palette($mat-warn, 500);

$bluetheme: mat.m2-define-light-theme(
  (
    color: (
      primary: $theme-primary,
      accent: $theme-accent,
      warn: $theme-warn,
    ),
    typography:
      mat.m2-define-typography-config(
        $font-family: "Plus Jakarta Sans",
        $subtitle-2: mat.m2-define-typography-level(14px, 14px, 400),
        $subtitle-1: mat.m2-define-typography-level(21px, 26px, 500),
        $headline-6: mat.m2-define-typography-level(18px, 26px, 600),
        $headline-5: mat.m2-define-typography-level(24px, 30px, 700),
        $button: mat.m2-define-typography-level(14px, 14px, 400),
        $body-1: mat.m2-define-typography-level(14px, 20px, 400),
        $body-2: mat.m2-define-typography-level(16px, 22px, 400),
      ),
  )
);

$darkbluetheme: mat.m2-define-dark-theme(
  (
    color: (
      primary: $theme-primary,
      accent: $theme-accent,
      warn: $theme-warn,
    ),
    typography:
      mat.m2-define-typography-config(
        $font-family: "Plus Jakarta Sans",
        $subtitle-2: mat.m2-define-typography-level(14px, 14px, 400),
        $subtitle-1: mat.m2-define-typography-level(21px, 26px, 500),
        $headline-6: mat.m2-define-typography-level(18px, 26px, 600),
        $headline-5: mat.m2-define-typography-level(24px, 30px, 700),
        $button: mat.m2-define-typography-level(14px, 14px, 400),
        $body-1: mat.m2-define-typography-level(14px, 20px, 400),
        $body-2: mat.m2-define-typography-level(16px, 22px, 400),
      ),
  )
);

.bg-primary {
  background: mat.m2-get-color-from-palette($theme-primary, 500) !important;
}

.horizontal-navbar .parentBox.pactive > a.primary:before,
.horizontal-navbar .parentBox.pactive > a.primary:hover:before,
.horizontal-navbar .parentBox > a.primary:hover:before,
.horizontal-navbar .parentBox.pactive:hover > a.primary:before {
  background-color: rgba(
    mat.m2-get-color-from-palette($theme-primary, 500),
    0.1
  ) !important;
  width: 100% !important;
}

.horizontal-navbar .parentBox.pactive > a.primary,
.horizontal-navbar .parentBox.pactive > a.primary:hover,
.horizontal-navbar .parentBox > a.primary:hover,
.horizontal-navbar .parentBox.pactive:hover > a.primary {
  color: mat.m2-get-color-from-palette($theme-primary, 500) !important;
}

.horizontal-navbar .parentBox.pactive > a.accent:before,
.horizontal-navbar .parentBox > a.accent:hover:before,
.horizontal-navbar .parentBox.pactive > a.accent:hover:before,
.horizontal-navbar .parentBox.pactive:hover > a.accent:before {
  background-color: rgba(
    mat.m2-get-color-from-palette($theme-accent, 500),
    0.1
  ) !important;
  width: 100% !important;
}

.horizontal-navbar .parentBox.pactive > a.accent,
.horizontal-navbar .parentBox.pactive > a.accent:hover,
.horizontal-navbar .parentBox.pactive:hover > a.accent {
  color: mat.m2-get-color-from-palette($theme-accent, 500) !important;
}

// vertical sidebar
.sidebar-list {
  &.mdc-list {
    .menu-list-item {
      &.primary {
        &.activeMenu,
        &.expanded,
        &:hover {
          .mdc-list-item__primary-text {
            color: mat.m2-get-color-from-palette($theme-primary, 500) !important;
          }

          .mat-mdc-list-item-icon {
            color: mat.m2-get-color-from-palette($theme-primary, 500) !important;
          }
        }

        &:before {
          background-color: rgba(
            mat.m2-get-color-from-palette($theme-primary, 500),
            0.1
          );
        }
      }
      &.accent {
        &.activeMenu,
        &.expanded,
        &:hover {
          .mdc-list-item__primary-text {
            color: mat.m2-get-color-from-palette($theme-accent, 500) !important;
          }

          .mat-mdc-list-item-icon {
            color: mat.m2-get-color-from-palette($theme-accent, 500) !important;
          }
        }
        &:before {
          background-color: rgba(
            mat.m2-get-color-from-palette($theme-accent, 500),
            0.1
          );
        }
      }
    }
  }
}

.mat-mdc-outlined-button {
  &.mat-primary {
    border-color: mat.m2-get-color-from-palette($theme-primary, 500) !important;
  }
  &.mat-accent {
    border-color: mat.m2-get-color-from-palette($theme-accent, 500) !important;
  }
  &.mat-warn {
    border-color: mat.m2-get-color-from-palette($theme-warn, 500) !important;
  }
}
