/* Shared Draft Punk extensions to Bootstrap and Dashkit components. */

:root {
  --dp-punk-blue: #355689;
  --dp-punk-blue-rgb: 53, 86, 137;
  --dp-light-blue: #42a5f5;
  --dp-light-blue-rgb: 66, 165, 245;
  --dp-punk-green: #437017;
  --dp-punk-green-rgb: 67, 112, 23;
  --dp-punk-blue-subtle: #e3f2fe;
}

.btn-xs {
  --bs-btn-padding-y: .125rem;
  --bs-btn-padding-x: .375rem;
  --bs-btn-font-size: .75rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
  line-height: 1.5;
}

.btn-punk {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--dp-punk-blue);
  --bs-btn-border-color: var(--dp-punk-blue);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #2d4974;
  --bs-btn-hover-border-color: #2a456e;
  --bs-btn-focus-shadow-rgb: 83, 111, 155;
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: #2a456e;
  --bs-btn-active-border-color: #284167;
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--dp-punk-blue);
  --bs-btn-disabled-border-color: var(--dp-punk-blue);
}

.btn-punk-light {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--dp-light-blue);
  --bs-btn-border-color: var(--dp-light-blue);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--dp-punk-blue);
  --bs-btn-hover-border-color: var(--dp-punk-blue);
  --bs-btn-focus-shadow-rgb: 94, 179, 247;
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: #2d4974;
  --bs-btn-active-border-color: #2a456e;
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--dp-light-blue);
  --bs-btn-disabled-border-color: var(--dp-light-blue);
}

.btn-punk-green {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--dp-punk-green);
  --bs-btn-border-color: var(--dp-punk-green);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #395f14;
  --bs-btn-hover-border-color: #365a12;
  --bs-btn-focus-shadow-rgb: 95, 133, 58;
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: #365a12;
  --bs-btn-active-border-color: #325411;
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--dp-punk-green);
  --bs-btn-disabled-border-color: var(--dp-punk-green);
}

.bg-punk-subtle {
  background-color: var(--dp-punk-blue-subtle) !important;
  color: var(--dp-punk-blue) !important;
}