/* --- 8. Button Variants --- */

/* Base button overrides */
.btn {
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-weight: 700;
  --bs-btn-font-family: var(--button-font-family);
  text-transform: uppercase;
  letter-spacing: 0.025rem;
}

.btn-sm, .btn-group-sm > .btn {
  --bs-btn-font-size: 0.875rem;
}

.btn-md {
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-font-size: 1.125rem;
}

.btn-lg, .btn-group-lg > .btn {
  --bs-btn-padding-x: 1.5rem;
}

/* Solid brand button variants (from compiled bootstrap-slim.css) */

.btn-mlj {
  --bs-btn-color: #fff;
  --bs-btn-bg: #008392;
  --bs-btn-border-color: #008392;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #006f7c;
  --bs-btn-hover-border-color: #006975;
  --bs-btn-focus-shadow-rgb: 38, 150, 162;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #006975;
  --bs-btn-active-border-color: #00626e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #008392;
  --bs-btn-disabled-border-color: #008392;
}

.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: #008392;
  --bs-btn-border-color: #008392;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #006f7c;
  --bs-btn-hover-border-color: #006975;
  --bs-btn-focus-shadow-rgb: 38, 150, 162;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #006975;
  --bs-btn-active-border-color: #00626e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #008392;
  --bs-btn-disabled-border-color: #008392;
}

.btn-brand-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #006B80;
  --bs-btn-border-color: #006B80;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #005b6d;
  --bs-btn-hover-border-color: #005666;
  --bs-btn-focus-shadow-rgb: 38, 129, 147;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #005666;
  --bs-btn-active-border-color: #005060;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #006B80;
  --bs-btn-disabled-border-color: #006B80;
}

.btn-brand-deep {
  --bs-btn-color: #fff;
  --bs-btn-bg: #003F58;
  --bs-btn-border-color: #003F58;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #00364b;
  --bs-btn-hover-border-color: #003246;
  --bs-btn-focus-shadow-rgb: 38, 92, 113;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #003246;
  --bs-btn-active-border-color: #002f42;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #003F58;
  --bs-btn-disabled-border-color: #003F58;
}

/* Outline brand button variants (from compiled bootstrap-slim.css) */

.btn-outline-mlj {
  --bs-btn-color: #008392;
  --bs-btn-border-color: #008392;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #008392;
  --bs-btn-hover-border-color: #008392;
  --bs-btn-focus-shadow-rgb: 0, 131, 146;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #008392;
  --bs-btn-active-border-color: #008392;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #008392;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #008392;
  --bs-gradient: none;
}

.btn-outline-brand {
  --bs-btn-color: #008392;
  --bs-btn-border-color: #008392;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #008392;
  --bs-btn-hover-border-color: #008392;
  --bs-btn-focus-shadow-rgb: 0, 131, 146;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #008392;
  --bs-btn-active-border-color: #008392;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #008392;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #008392;
  --bs-gradient: none;
}

.btn-outline-brand-dark {
  --bs-btn-color: #006B80;
  --bs-btn-border-color: #006B80;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #006B80;
  --bs-btn-hover-border-color: #006B80;
  --bs-btn-focus-shadow-rgb: 0, 107, 128;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #006B80;
  --bs-btn-active-border-color: #006B80;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #006B80;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #006B80;
  --bs-gradient: none;
}

.btn-outline-brand-deep {
  --bs-btn-color: #003F58;
  --bs-btn-border-color: #003F58;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #003F58;
  --bs-btn-hover-border-color: #003F58;
  --bs-btn-focus-shadow-rgb: 0, 63, 88;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #003F58;
  --bs-btn-active-border-color: #003F58;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #003F58;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #003F58;
  --bs-gradient: none;
}

/* Brand disabled overrides */

.btn-brand:disabled,
.btn-brand-dark:disabled {
  --bs-btn-disabled-opacity: .45;
  filter: saturate(0.2);
}

/* Special button variants (from compiled bootstrap-slim.css) */

.btn-blanco {
  --bs-btn-color: #008392;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: rgba(0, 63, 88, 0.1);
  --bs-btn-hover-color: #003F58;
  --bs-btn-hover-bg: #FCFCFD;
  --bs-btn-hover-border-color: rgba(0, 63, 88, 0.15);
  --bs-btn-focus-shadow-rgb: 0, 115, 133;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #FCFCFD;
  --bs-btn-active-border-color: rgba(173, 193, 201, 0.19);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: rgba(0, 63, 88, 0.1);
  /* */
  --bs-btn-focus-shadow-rgb: 218, 223, 228;
}

.btn-grayscale {
  --bs-btn-color: #212529;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #DADFE4;
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: #FCFCFD;
  --bs-btn-hover-border-color: #CED6DB;
  --bs-btn-focus-shadow-rgb: 190, 195, 200;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #FCFCFD;
  --bs-btn-active-border-color: #dee2e7;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: #DADFE4;
  --bs-btn-focus-shadow-rgb: 218, 223, 228;
}

/* Link-style brand buttons */

.btn-mlj-link,
.btn-brand-link {
  border: 0;
  padding: 0;
  line-height: 1;
  margin: 0;
  border-radius: 0;
  color: #008392;
}

/* Collapsible button */

.collapsible-btn {
  display: flex;
}
.collapsible-btn .collapsible-btn__icon {
  position: relative;
  height: 1.5rem;
  width: 1.5rem;
}
.collapsible-btn .collapsible-btn__icon::before,
.collapsible-btn .collapsible-btn__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
  background-position: center center;
  background-repeat: no-repeat;
}
.collapsible-btn .collapsible-btn__icon::before {
  background-image: url("../../images/dash-lg.svg");
}
.collapsible-btn .collapsible-btn__icon::after {
  background-image: url("../../images/plus-lg.svg");
}
.collapsible-btn[aria-expanded=true] .collapsible-btn__icon::before {
  opacity: 1;
}
.collapsible-btn[aria-expanded=true] .collapsible-btn__icon::after {
  opacity: 0;
}
.collapsible-btn[aria-expanded=false] .collapsible-btn__icon::before {
  opacity: 0;
}
.collapsible-btn[aria-expanded=false] .collapsible-btn__icon::after {
  opacity: 1;
}