/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
@font-face {
  font-family: "F37 Ginger Rounded";
  src: url("/themes/custom/doas_theme/src/stories/global/fonts/F37GingerRounded/F37GingerRoundedTrial-Regular.woff2") format("woff2"), url("/themes/custom/doas_theme/src/stories/global/fonts/Proxima_Nova/F37GingerRoundedTrial-Regular.woff") format("woff"), url("/themes/custom/doas_theme/src/stories/global/fonts/Proxima_Nova/F37GingerRoundedTrial-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arial";
  src: url("/themes/custom/doas_theme/src/stories/global/fonts/Arial/Arial.woff2") format("woff2"), url("/themes/custom/doas_theme/src/stories/global/fonts/Arial/Arial.woff") format("woff"), url("/themes/custom/doas_theme/src/stories/global/fonts/Arial/Arial.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.centered-button {
  display: flex;
  justify-content: center;
}

.button__container {
  margin-top: 30px;
}

.button,
input[type=submit] {
  margin: 0;
  background: transparent;
  border: 0.0625rem solid #235789;
  border-radius: 0.625rem;
  color: #235789;
  font-weight: 400;
  text-transform: capitalize;
  font-family: "Arial", sans-serif;
  font-size: 1rem;
  padding: 1.125rem 1.875rem;
  height: auto;
  transition: all 0.5s ease-in-out;
}
@media (max-width: 767px) {
  .button,
  input[type=submit] {
    font-size: 0.938rem;
    padding: 0.75rem 1.5rem;
  }
}
.button:hover, .button:focus,
input[type=submit]:hover,
input[type=submit]:focus {
  border: 0.0625rem solid #235789;
  background: #235789;
  color: #ffffff;
  font-weight: 400;
}

.button--secondary {
  border-color: #979797;
}
.button--secondary:hover {
  background: rgba(151, 151, 151, 0.4);
  border-color: transparent;
}
.button--secondary .icon-arrow-circle__circle {
  color: #f8f8fb;
}

.button--dropdown {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 0;
  border: 1px solid #000000;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  font-size: 1.125rem;
}
.button--dropdown span {
  padding: 12px 24px;
}
.button--dropdown::after {
  content: "";
  display: flex;
  width: 48px;
  justify-content: center;
  align-items: center;
  background: #0d875e url("../../../src/stories/components/button/assets/chevron-down.svg") center center no-repeat;
  border-left: 1px solid #000000;
  color: #ffffff;
}
.button--dropdown:hover, .button--dropdown:active, .button--dropdown:focus {
  background-color: #ffffff;
  border-color: #000000;
}
.button--dropdown:hover::after, .button--dropdown:active::after, .button--dropdown:focus::after {
  background-color: #08573d;
}