/** Included _colors.scss */
/* Color mixins which can be used in CSS files */
/** Included _breakpoints.scss */
/** Included _typesetting.scss */
/** Included _foundation.scss */
/* COLORS */
/* Set up color inheritance from parent element */
.ds-ele.cs-w .ds_button:not([class*=cs-]),
.ds-ele.cs-g .ds_button:not([class*=cs-]) {
  --primary-color: #ffffff;
  --background-color: #1871bd;
  --active-primary-color: #ffffff;
  --active-background-color: #fb4d42;
  --color-error: #d22d23;
}

.ds-ele.cs-b .ds_button:not([class*=cs-]),
.ds-ele.cs-ob .ds_button:not([class*=cs-]) {
  --primary-color: #091f2f;
  --background-color: #ffffff;
  --active-primary-color: #ffffff;
  --active-background-color: #fb4d42;
  --color-error: #d22d23;
}

.ds-ele .ds_button.cs-w {
  --primary-color: #091f2f;
  --background-color: #ffffff;
  --active-primary-color: #ffffff;
  --active-background-color: #fb4d42;
  --color-error: #d22d23;
  border: 1px solid #091f2f;
}
.ds-ele .ds_button.cs-w:hover, .ds-ele .ds_button.cs-w:active, .ds-ele .ds_button.cs-w:focus {
  border: 1px solid transparent;
}

.ds-ele .ds_button.cs-g {
  --primary-color: #091f2f;
  --background-color: #ffffff;
  --active-primary-color: #ffffff;
  --active-background-color: #fb4d42;
  --color-error: #d22d23;
  border: 1px solid #091f2f;
  --background-color: #e0e0e0;
}
.ds-ele .ds_button.cs-g:hover, .ds-ele .ds_button.cs-g:active, .ds-ele .ds_button.cs-g:focus {
  border: 1px solid transparent;
}

.ds-ele .ds_button.cs-b {
  --primary-color: #ffffff;
  --background-color: #1871bd;
  --active-primary-color: #ffffff;
  --active-background-color: #fb4d42;
  --color-error: #d22d23;
  --background-color: #091f2f;
}

.ds-ele .ds_button.cs-ob {
  --primary-color: #ffffff;
  --background-color: #1871bd;
  --active-primary-color: #ffffff;
  --active-background-color: #fb4d42;
  --color-error: #d22d23;
}

/* The button */
.ds_button {
  background: var(--background-color);
  padding: 1rem;
  cursor: pointer;
  border-radius: 2px;
  line-height: normal;
  width: fit-content;
  /* States */
}
.ds_button.text.icon:not(:has(a)), .ds_button.text.icon a {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
}
.ds_button .button-ico svg {
  width: 1.5625rem;
  height: 1.5625rem;
}
.ds_button .button-ico svg .cob-ds {
  fill: var(--primary-color);
}
@media (min-width: 481px) {
  .ds_button .button-ico {
    height: 1.5625rem;
    width: 1.5625rem;
  }
}
.ds_button .button-text {
  color: var(--primary-color);
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  line-height: normal;
  font-weight: 600;
  margin-top: 2px;
}
.ds_button a {
  color: inherit;
  text-decoration: none;
}
.ds_button--compact {
  padding: 0.75rem;
}
.ds_button--compact .button-text {
  font-size: 1rem;
}
.ds_button--compact .button-ico,
.ds_button--compact .button-ico svg {
  width: 1.25rem;
  height: 1.25rem;
}
.ds_button--compact.text.icon {
  column-gap: 4px;
}
.ds_button--large {
  padding: 1.5rem;
}
.ds_button--large .button-text {
  font-size: 1.25rem;
}
.ds_button--large .button-ico,
.ds_button--large .button-ico svg {
  width: 1.5625rem;
  height: 1.5625rem;
}
.ds_button--large.text.icon {
  column-gap: 12px;
}
.ds_button--xlarge {
  padding: 2rem;
}
.ds_button--xlarge .button-text {
  font-size: 1.5625rem;
}
.ds_button--xlarge .button-ico,
.ds_button--xlarge .button-ico svg {
  width: 2.25rem;
  height: 2.25rem;
}
.ds_button--xlarge.text.icon {
  column-gap: 16px;
}
.ds_button:hover, .ds_button:focus, .ds_button:active, .ds_button.isactive {
  background: var(--active-background-color);
}
.ds_button:hover .button-text, .ds_button:focus .button-text, .ds_button:active .button-text, .ds_button.isactive .button-text {
  color: var(--active-primary-color);
}
.ds_button:hover .button-ico svg .cob-ds, .ds_button:focus .button-ico svg .cob-ds, .ds_button:active .button-ico svg .cob-ds, .ds_button.isactive .button-ico svg .cob-ds {
  fill: var(--active-primary-color);
}

/* Spinner */
.ds_button.isactive:not(.no-spin) .button-ico {
  display: block;
  border: 4px dotted;
  border-color: var(--active-background-color) var(--active-primary-color);
  border-radius: 50%;
  width: 1.5625rem;
  height: 1.5625rem;
  animation: spin 1.5s ease-in-out infinite;
}
.ds_button.isactive:not(.no-spin) .button-ico svg {
  display: none;
}
.ds_button--compact.isactive:not(.no-spin) .button-ico {
  width: 1.25rem;
  height: 1.25rem;
  border: 3px dotted;
  border-color: var(--active-background-color) var(--active-primary-color);
}
.ds_button--xlarge.isactive:not(.no-spin) .button-ico {
  width: 2.25rem;
  height: 2.25rem;
  border: 6px dotted;
  border-color: var(--active-background-color) var(--active-primary-color);
}

/* Keyframes for spinner animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(540deg);
  }
}
/* Messages */
.ds_button ~ .btn-message {
  margin-top: 0.25rem;
  display: none;
}
.ds_button ~ .btn-message.info {
  display: block;
  color: var(--primary-color);
}
.ds_button ~ .btn-message.red, .ds_button ~ .btn-message.error {
  display: block;
  color: #fb4d42;
  font-style: italic;
  font-weight: 800;
}
.ds_button ~ .btn-message.green, .ds_button ~ .btn-message.success {
  display: block;
  color: #008817;
}
.ds_button ~ .btn-message.gold, .ds_button ~ .btn-message.warning {
  display: block;
  color: #fcb61a;
}

/*# sourceMappingURL=button.css.map */