/**
 * @file
 * Color styling rules for Elegant+.
 *
 */

/* components: buttons */
a.mt-button,
.mt-button > a,
button.mt-button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  border-color: var(--mt-color-secondary);
  background-color: var(--mt-color-secondary);
  color: var(--mt-color-secondary-contrast);
}
a.mt-button:hover,
.mt-button > a:hover,
button.mt-button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
  background-color: var(--mt-color-secondary-dark);
  border-color: var(--mt-color-secondary-dark);
}
a.mt-button:active,
.mt-button > a:active,
button.mt-button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
a.mt-button.mt-button--outline:active,
.mt-button.mt-button--outline > a:active,
input[type="submit"].mt-button--outline:active,
input[type="reset"].mt-button--outline:active,
input[type="button"].mt-button--outline:active {
  background-color: var(--mt-color-secondary);
  border-color: var(--mt-color-secondary);
}
a.mt-button:before,
.mt-button > a:before,
button.mt-button:before {
  background-color: var(--mt-color-secondary-dark);
}
.region--colored-background a.mt-button:hover,
.region--colored-background .mt-button > a:hover,
.region--colored-background button.mt-button:hover,
.region--colored-background input[type="submit"]:hover,
.region--colored-background input[type="reset"]:hover,
.region--colored-background input[type="button"]:hover,
.region--colored-background a.mt-button:active,
.region--colored-background .mt-button > a:active,
.region--colored-background button.mt-button:active,
.region--colored-background input[type="submit"]:active,
.region--colored-background input[type="reset"]:active,
.region--colored-background input[type="button"]:active {
  color: var(--mt-color-colored);
}
.region--dark-colored-background a.mt-button:hover,
.region--dark-colored-background .mt-button > a:hover,
.region--dark-colored-background button.mt-button:hover,
.region--dark-colored-background input[type="submit"]:hover,
.region--dark-colored-background input[type="reset"]:hover,
.region--dark-colored-background input[type="button"]:hover,
.region--dark-colored-background a.mt-button:active,
.region--dark-colored-background .mt-button > a:active,
.region--dark-colored-background button.mt-button:active,
.region--dark-colored-background input[type="submit"]:active,
.region--dark-colored-background input[type="reset"]:active,
.region--dark-colored-background input[type="button"]:active {
  color: var(--mt-color-dark-colored);
}
.region--default-background a.mt-button.mt-button--hover-style-2:before,
.region--default-background .mt-button.mt-button--hover-style-2 > a:before {
  background-color: var(--mt-color-default);
}
.region--bright-background a.mt-button.mt-button--hover-style-2:before,
.region--bright-background .mt-button.mt-button--hover-style-2 > a:before {
  background-color: var(--mt-bright-default);
}
.region--pattern a.mt-button.mt-button--hover-style-2:before,
.region--pattern .mt-button.mt-button--hover-style-2 > a:before {
  background-color: var(--mt-color-pattern);
}
.region--accent-background a.mt-button.mt-button--hover-style-2:before,
.region--accent-background .mt-button.mt-button--hover-style-2 > a:before {
  background-color: var(--mt-color-accent);
}
.region--tint-background a.mt-button.mt-button--hover-style-2:before,
.region--tint-background .mt-button.mt-button--hover-style-2 > a:before {
  background-color: var(--mt-color-tint);
}
.region--shade-background a.mt-button.mt-button--hover-style-2:before,
.region--shade-background .mt-button.mt-button--hover-style-2 > a:before {
  background-color: var(--mt-color-shade);
}
.region--colored-background a.mt-button.mt-button--hover-style-2:before,
.region--colored-background .mt-button.mt-button--hover-style-2 > a:before {
  background-color: var(--mt-color-colored);
}
.region--dark-colored-background a.mt-button.mt-button--hover-style-2:before,
.region--dark-colored-background .mt-button.mt-button--hover-style-2 > a:before {
  background-color: var(--mt-color-dark-colored);
}
.region--dark-background a.mt-button.mt-button--hover-style-2:before,
.region--dark-background .mt-button.mt-button--hover-style-2 > a:before {
  background-color: var(--mt-color-dark);
}

.menu.cta-active > li:last-child > a,
.menu.cta-active > li:last-child > a.is-active {
  background-color: var(--mt-color-secondary);
  border-color: var(--mt-color-secondary);
  color: var(--mt-color-secondary-contrast);
}
.menu.cta-active > li:last-child > a:hover,
.menu.cta-active > li:last-child > a.is-active:hover,
.menu.cta-active > li:last-child > a:focus,
.menu.cta-active > li:last-child > a.is-active:focus {
  background-color: var(--mt-color-secondary-light);
  border-color: var(--mt-color-secondary-light);
}
.menu.cta-active > li:last-child > a:hover:before,
.menu.cta-active > li:last-child > a:focus:before,
.menu.cta-active > li:last-child > a.is-active:hover:before,
.menu.cta-active > li:last-child > a.is-active:focus:before {
  background-color: var(--mt-color-secondary-light);
}
.region--colored-background .menu.cta-active > li:last-child > a,
.region--colored-background .menu.cta-active > li:last-child > a.is-active {
  color: var(--mt-color-colored);
}
.region--colored-background .menu.cta-active > li:last-child > a:hover:before,
.region--colored-background .menu.cta-active > li:last-child > a:focus:before,
.region--colored-background .menu.cta-active > li:last-child > a.is-active:hover:before,
.region--colored-background .menu.cta-active > li:last-child > a.is-active:focus:before {
  background: none;
}
.region--dark-colored-background .menu.cta-active > li:last-child > a,
.region--dark-colored-background .menu.cta-active > li:last-child > a.is-active {
  color: var(--mt-color-dark-colored);
}
.region--dark-colored-background .menu.cta-active > li:last-child > a:hover:before,
.region--dark-colored-background .menu.cta-active > li:last-child > a:focus:before,
.region--dark-colored-background .menu.cta-active > li:last-child > a.is-active:hover:before,
.region--dark-colored-background .menu.cta-active > li:last-child > a.is-active:focus:before {
  background: none;
}

/* Override fade on hover(header menu) */
.header-container .sf-menu ul li a:hover {
  opacity: 1;
}

/* Override submenu background color */
.region--accent-background {
  --mt-submenu-background-color: var(--mt-color-bright);
}

/* Override sticky menu background color */
.region--accent-background.js-fixed {
  background-color: var(--mt-color-bright);
  --mt-submenu-background-color: var(--mt-color-bright);
}