/***** Vistra Design System *****/
/************************************/
/* 16px */
/* 24px */
/***** START: New theme variables *****/
/************************************/
/***** END: New theme variables ******/
/************************************/
.button {
  --button-border-radius: 0.5rem;
  --button-bg-color: #0909B7;
  --button-color: #FFF;
  --button-font-weight: var(--font-weight-regular);
  border-radius: var(--button-border-radius);
  background-color: var(--button-bg-color);
  color: var(--button-color);
  padding: var(--spacing-default) var(--spacing-loose);
  font-weight: var(--button-font-weight);
  text-align: center;
  cursor: pointer;
  font-size: 1rem;
  border: none;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px;
  font-family: var(--font-family-base);
  line-height: 24px;
  width: 100%;
}
@media all and (min-width: 48em) {
  .button {
    width: auto;
  }
}
.button:hover {
  background: rgb(6.609375, 6.609375, 134.390625);
  transition: background 0.3s;
}
.button:active {
  background: rgb(4.21875, 4.21875, 85.78125);
  transition: background 0.3s;
}
.button:focus-visible {
  box-shadow: 0 0 0 5px #3f80ff;
  outline: 2px solid white;
  transition: background 0.3s;
}
.button .icon svg path {
  fill: var(--button-color);
}
.button .icon {
  --size: 24px;
  margin-left: 4px;
  width: var(--size);
  height: var(--size);
}
.button .icon svg {
  width: var(--size);
  height: var(--size);
}
.button--size-default {
  padding: var(--spacing-default) var(--spacing-loose);
}
.button--primary {
  --button-bg-color: #0909B7;
  --button-color: #FFF;
}
.button--primary:hover {
  background: rgb(6.609375, 6.609375, 134.390625);
  transition: background 0.3s;
}
.button--primary:active {
  background: rgb(4.21875, 4.21875, 85.78125);
  transition: background 0.3s;
}
.button--primary:focus-visible {
  box-shadow: 0 0 0 5px #3f80ff;
  outline: 2px solid white;
  transition: background 0.3s;
}
.button--primary .icon svg path {
  fill: var(--button-color);
}
.button--secondary {
  --button-bg-color: #FFF;
  --button-color: #0909B7;
}
.button--secondary:hover {
  background: rgb(229.5, 229.5, 229.5);
  transition: background 0.3s;
}
.button--secondary:active {
  background: #cccccc;
  transition: background 0.3s;
}
.button--secondary:focus-visible {
  box-shadow: 0 0 0 5px #3f80ff;
  outline: 2px solid white;
  transition: background 0.3s;
}
.button--secondary .icon svg path {
  fill: var(--button-color);
}
.button--outline {
  --button-bg-color: #FFF;
  --button-color: #0909B7;
  border: 1px solid var(--button-color);
  /* Adjust padding to account for the border */
  padding: calc(var(--spacing-default) - 1px) calc(var(--spacing-loose) - 1px);
}
.button--outline:hover {
  background: rgb(229.5, 229.5, 229.5);
  transition: background 0.3s;
}
.button--outline:active {
  background: #cccccc;
  transition: background 0.3s;
}
.button--outline:focus-visible {
  box-shadow: 0 0 0 5px #3f80ff;
  outline: 2px solid white;
  transition: background 0.3s;
}
.button--outline .icon svg path {
  fill: var(--button-color);
}
.button--outline-dark {
  --button-color: #FFF;
  border: 1px solid var(--button-color);
  /* Adjust padding to account for the border */
  padding: calc(var(--spacing-default) - 1px) calc(var(--spacing-loose) - 1px);
}
.button--outline-transparent-white {
  --button-bg-color: transparent;
  --button-color: #FFF;
  border: 1px solid var(--button-color);
  /* Adjust padding to account for the border */
  padding: calc(var(--spacing-default) - 1px) calc(var(--spacing-loose) - 1px);
}
.button--outline-transparent-white:hover {
  background: transparent;
}
.button--outline-transparent-blue {
  --button-bg-color: transparent;
  --button-color: #0909B7;
  border: 1px solid var(--button-color);
  /* Adjust padding to account for the border */
  padding: calc(var(--spacing-default) - 1px) calc(var(--spacing-loose) - 1px);
}
.button--outline-transparent-blue:hover {
  background: transparent;
}
.button--destructive {
  --button-bg-color: #da3237;
  --button-color: #FFF;
}
.button--destructive:hover {
  background: rgb(183.8223140496, 33.1776859504, 37.6611570248);
  transition: background 0.3s;
}
.button--destructive:active {
  background: rgb(140.6198347107, 25.3801652893, 28.8099173554);
  transition: background 0.3s;
}
.button--destructive:focus-visible {
  box-shadow: 0 0 0 5px #3f80ff;
  outline: 2px solid white;
  transition: background 0.3s;
}
.button--destructive .icon svg path {
  fill: var(--button-color);
}
.button--destructive-outline {
  --button-bg-color: #FFF;
  --button-color: #da3237;
  border: 1px solid var(--button-color);
  /* Adjust padding to account for the border */
  padding: calc(var(--spacing-default) - 1px) calc(var(--spacing-loose) - 1px);
}
.button--destructive-outline:hover {
  background: rgb(229.5, 229.5, 229.5);
  transition: background 0.3s;
}
.button--destructive-outline:active {
  background: #cccccc;
  transition: background 0.3s;
}
.button--destructive-outline:focus-visible {
  box-shadow: 0 0 0 5px #3f80ff;
  outline: 2px solid white;
  transition: background 0.3s;
}
.button--destructive-outline .icon svg path {
  fill: var(--button-color);
}
.button--size-compact {
  padding: var(--spacing-tight) var(--spacing-loose);
}
.button.disabled {
  --button-bg-color: colors.$grey-50;
  --button-color: colors.$grey-250;
}

.cn-site .button {
  --font-family-base: var(--font-family-base-cn) ;
}
/*# sourceMappingURL=button.css.map */