.button-view {
  align-items: center;
  gap: var(--spacing-8);
  font-family: var(--typography-font-sans);
  font-size: var(--font-size-medium-16);
  line-height: var(--line-height-small-22);
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
  box-sizing: border-box;
  border-width: var(--border-width-base);
  border-style: solid;
  border-radius: var(--border-radius-pill);
  cursor: pointer;
  transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

.button-view:focus {
  outline: var(--border-width-base) solid var(--border-color-transparent) !important;
}

.button-view:focus-visible {
  outline: var(--border-width-thick) solid var(--border-color-blue-focus) !important;
  outline-offset: var(--border-width-base) !important;
}

.button-view:disabled {
  color: var(--color-disabled) !important;
  cursor: var(--cursor-not-allowed) !important;
}

.button-view:disabled .button-icon, .button-view:disabled .button-label, .button-view:disabled .icon-view {
  color: var(--color-disabled) !important;
}

.button-view[data-font-weight='normal'] {
  font-weight: var(--font-weight-normal);
}

.button-view[data-font-weight='semibold'] {
  font-weight: var(--font-weight-semi-bold);
}

.button-view.button-radius-minimal {
  border-radius: var(--border-radius-minimal);
}

.button-view.button-radius-base {
  border-radius: var(--border-radius-base);
}

.button-view.button-radius-sharp {
  border-radius: var(--border-radius-sharp);
}

.button-view.button-radius-circle {
  border-radius: var(--border-radius-circle);
}

.button-view[data-icon-only='true'] {
  display: flex;
  justify-content: center;
  align-self: flex-start;
  padding: 0;
}

.button-view[data-justify-content='flex-start'] {
  justify-content: flex-start;
}

.button-view[data-justify-content='center'] {
  justify-content: center;
}

.button-view[data-justify-content='flex-end'] {
  justify-content: flex-end;
}

.button-view[data-justify-content='space-between'] {
  justify-content: space-between;
}

.button-view[data-justify-content='space-around'] {
  justify-content: space-around;
}

.button-view[data-justify-content='space-evenly'] {
  justify-content: space-evenly;
}

.button-view[data-icon-only='true'] {
  justify-content: center !important;
}

.button-view[data-icon-only='false'][data-full-width='true'] {
  display: flex;
  width: 100%;
  align-self: flex-start;
}

.button-view[data-icon-only='false'][data-full-width='false'] {
  display: inline-flex;
  align-self: flex-start;
}

.button-view[data-size='mini'] {
  min-height: calc(((var(--spacing-0) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
  font-size: var(--font-size-x-small-12);
  --size-icon-small: var(--font-size-x-small-12);
}

.button-view[data-size='small'] {
  min-height: calc(((var(--spacing-4) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
  font-size: var(--font-size-small-14);
  --size-icon-small: var(--font-size-small-14);
}

.button-view[data-size='medium'] {
  min-height: calc(((var(--spacing-8) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
}

.button-view[data-size='large'] {
  min-height: calc(((var(--spacing-12) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
  font-size: var(--font-size-large-18);
}

.button-view[data-full-width='false'][data-size='mini'] {
  min-width: calc(((var(--spacing-0) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
}

.button-view[data-full-width='false'][data-size='small'] {
  min-width: calc(((var(--spacing-4) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
}

.button-view[data-full-width='false'][data-size='medium'] {
  min-width: calc(((var(--spacing-8) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
}

.button-view[data-full-width='false'][data-size='large'] {
  min-width: calc(((var(--spacing-12) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
}

.button-view[data-full-width='true'] {
  width: 100%;
}

.button-view[data-icon-only='true'][data-size='mini'] {
  width: calc(((var(--spacing-0) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
  height: calc(((var(--spacing-0) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
}

.button-view[data-icon-only='true'][data-size='small'] {
  width: calc(((var(--spacing-4) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
  height: calc(((var(--spacing-4) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
}

.button-view[data-icon-only='true'][data-size='medium'] {
  width: calc(((var(--spacing-8) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
  height: calc(((var(--spacing-8) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
}

.button-view[data-icon-only='true'][data-size='large'] {
  width: calc(((var(--spacing-12) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
  height: calc(((var(--spacing-12) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
}

.button-view[data-icon-only='false'][data-size='mini'] {
  padding: var(--spacing-0);
}

.button-view[data-icon-only='false'][data-size='small'] {
  padding: var(--spacing-4);
}

.button-view[data-icon-only='false'][data-size='medium'] {
  padding: var(--spacing-8);
}

.button-view[data-icon-only='false'][data-size='large'] {
  padding: var(--spacing-12);
}

.button-view .button-label {
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border-width: 0;
}

.button-view .button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-view[data-size='mini'] .button-icon {
  height: var(--font-size-x-small-12);
}

.button-view[data-size='small'] .button-icon {
  height: var(--font-size-small-14);
}

.button-view[data-size='medium'] .button-icon {
  height: var(--size-icon-small);
}

.button-view[data-size='large'] .button-icon {
  height: var(--font-size-large-18);
}

@media (max-width: 479px) {
  :root[data-phone-step='down'] .button-view[data-size='small'] {
    min-height: calc(((var(--spacing-0) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2)) !important;
    font-size: var(--font-size-x-small-12) !important;
    --size-icon-small: var(--font-size-x-small-12) !important;
  }

:root[data-phone-step='down'] .button-view[data-full-width='false'][data-size='small'] {
    min-width: calc(((var(--spacing-0) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2)) !important;
  }

:root[data-phone-step='down'] .button-view[data-icon-only='true'][data-size='small'] {
    width: calc(((var(--spacing-0) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2)) !important;
    height: calc(((var(--spacing-0) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2)) !important;
  }

:root[data-phone-step='down'] .button-view[data-icon-only='false'][data-size='small'] {
    padding: var(--spacing-0) !important;
  }

:root[data-phone-step='down'] .button-view[data-size='small'] .button-icon {
    height: var(--font-size-x-small-12) !important;
  }

:root[data-phone-step='down'] .button-view[data-size='medium'] {
    min-height: calc(((var(--spacing-4) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2)) !important;
    font-size: var(--font-size-small-14) !important;
  }

:root[data-phone-step='down'] .button-view[data-full-width='false'][data-size='medium'] {
    min-width: calc(((var(--spacing-4) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2)) !important;
  }

:root[data-phone-step='down'] .button-view[data-icon-only='true'][data-size='medium'] {
    width: calc(((var(--spacing-4) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2)) !important;
    height: calc(((var(--spacing-4) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2)) !important;
  }

:root[data-phone-step='down'] .button-view[data-icon-only='false'][data-size='medium'] {
    padding: var(--spacing-4) !important;
  }

:root[data-phone-step='down'] .button-view[data-size='medium'] {
    --size-icon-small: var(--font-size-small-14) !important;
  }

:root[data-phone-step='down'] .button-view[data-size='large'] {
    min-height: calc(((var(--spacing-8) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2)) !important;
    font-size: var(--font-size-medium-16) !important;
  }

:root[data-phone-step='down'] .button-view[data-full-width='false'][data-size='large'] {
    min-width: calc(((var(--spacing-8) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2)) !important;
  }

:root[data-phone-step='down'] .button-view[data-icon-only='true'][data-size='large'] {
    width: calc(((var(--spacing-8) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2)) !important;
    height: calc(((var(--spacing-8) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2)) !important;
  }

:root[data-phone-step='down'] .button-view[data-icon-only='false'][data-size='large'] {
    padding: var(--spacing-8) !important;
  }

:root[data-phone-step='down'] .button-view[data-size='large'] {
    --font-size-large-18: var(--font-size-medium-16) !important;
  }
}

.button-view[data-weight='quiet'], .button-view[data-weight='plain'] {
  background-color: var(--background-color-transparent) !important;
  border-color: transparent !important;
}

.button-view[data-weight='quiet'][data-color='gray'], .button-view[data-weight='plain'][data-color='gray'] {
  color: var(--color-base) !important;
}

.button-view[data-weight='quiet'][data-color='red'], .button-view[data-weight='plain'][data-color='red'] {
  color: var(--color-red) !important;
}

.button-view[data-weight='quiet'][data-color='orange'], .button-view[data-weight='plain'][data-color='orange'] {
  color: var(--color-orange) !important;
}

.button-view[data-weight='quiet'][data-color='yellow'], .button-view[data-weight='plain'][data-color='yellow'] {
  color: var(--color-yellow) !important;
}

.button-view[data-weight='quiet'][data-color='lime'], .button-view[data-weight='plain'][data-color='lime'] {
  color: var(--color-lime) !important;
}

.button-view[data-weight='quiet'][data-color='green'], .button-view[data-weight='plain'][data-color='green'] {
  color: var(--color-green) !important;
}

.button-view[data-weight='quiet'][data-color='mint'], .button-view[data-weight='plain'][data-color='mint'] {
  color: var(--color-mint) !important;
}

.button-view[data-weight='quiet'][data-color='cyan'], .button-view[data-weight='plain'][data-color='cyan'] {
  color: var(--color-cyan) !important;
}

.button-view[data-weight='quiet'][data-color='blue'], .button-view[data-weight='plain'][data-color='blue'] {
  color: var(--color-blue) !important;
}

.button-view[data-weight='quiet'][data-color='indigo'], .button-view[data-weight='plain'][data-color='indigo'] {
  color: var(--color-indigo) !important;
}

.button-view[data-weight='quiet'][data-color='violet'], .button-view[data-weight='plain'][data-color='violet'] {
  color: var(--color-violet) !important;
}

.button-view[data-weight='quiet'][data-color='magenta'], .button-view[data-weight='plain'][data-color='magenta'] {
  color: var(--color-magenta) !important;
}

.button-view[data-weight='quiet'][data-color='pink'], .button-view[data-weight='plain'][data-color='pink'] {
  color: var(--color-pink) !important;
}

.button-view[data-weight='quiet']:disabled, .button-view[data-weight='plain']:disabled {
  background-color: var(--background-color-base) !important;
  border-color: transparent !important;
}

.button-view[data-weight='subtle']:disabled, .button-view[data-weight='solid']:disabled, .button-view[data-weight='static']:disabled {
  background-color: var(--background-color-disabled) !important;
  border-color: var(--border-color-disabled) !important;
}

.button-view[data-weight='solid'][data-color='gray'] {
  background-color: var(--background-color-interactive);
  color: var(--color-base);
  border-color: var(--border-color-base);
}

.button-view[data-weight='subtle'][data-color='gray'] {
  background-color: var(--background-color-base);
  color: var(--color-base);
  border-color: var(--border-color-base);
}

.button-view[data-weight='static'][data-color='gray'] {
  background-color: var(--background-color-base);
  color: var(--color-base);
  border-color: var(--border-color-base);
}

.button-view[data-weight='subtle'][data-color='red'] {
  background-color: var(--background-color-red-subtle);
  color: var(--color-red);
  border-color: var(--border-color-red);
}

.button-view[data-weight='subtle'][data-color='orange'] {
  background-color: var(--background-color-orange-subtle);
  color: var(--color-orange);
  border-color: var(--border-color-orange);
}

.button-view[data-weight='subtle'][data-color='yellow'] {
  background-color: var(--background-color-yellow-subtle);
  color: var(--color-yellow);
  border-color: var(--border-color-yellow);
}

.button-view[data-weight='subtle'][data-color='lime'] {
  background-color: var(--background-color-lime-subtle);
  color: var(--color-lime);
  border-color: var(--border-color-lime);
}

.button-view[data-weight='subtle'][data-color='green'] {
  background-color: var(--background-color-green-subtle);
  color: var(--color-green);
  border-color: var(--border-color-green);
}

.button-view[data-weight='subtle'][data-color='mint'] {
  background-color: var(--background-color-mint-subtle);
  color: var(--color-mint);
  border-color: var(--border-color-mint);
}

.button-view[data-weight='subtle'][data-color='cyan'] {
  background-color: var(--background-color-cyan-subtle);
  color: var(--color-cyan);
  border-color: var(--border-color-cyan);
}

.button-view[data-weight='subtle'][data-color='blue'] {
  background-color: var(--background-color-blue-subtle);
  color: var(--color-blue);
  border-color: var(--border-color-blue);
}

.button-view[data-weight='subtle'][data-color='indigo'] {
  background-color: var(--background-color-indigo-subtle);
  color: var(--color-indigo);
  border-color: var(--border-color-indigo);
}

.button-view[data-weight='subtle'][data-color='violet'] {
  background-color: var(--background-color-violet-subtle);
  color: var(--color-violet);
  border-color: var(--border-color-violet);
}

.button-view[data-weight='subtle'][data-color='magenta'] {
  background-color: var(--background-color-magenta-subtle);
  color: var(--color-magenta);
  border-color: var(--border-color-magenta);
}

.button-view[data-weight='subtle'][data-color='pink'] {
  background-color: var(--background-color-pink-subtle);
  color: var(--color-pink);
  border-color: var(--border-color-pink);
}

.button-view[data-weight='solid'][data-color='red'] {
  background-color: var(--background-color-red);
  color: var(--color-on-solid);
  border-color: var(--background-color-red);
}

.button-view[data-weight='solid'][data-color='orange'] {
  background-color: var(--background-color-orange);
  color: var(--color-on-solid);
  border-color: var(--background-color-orange);
}

.button-view[data-weight='solid'][data-color='yellow'] {
  background-color: var(--background-color-yellow);
  color: var(--color-on-solid);
  border-color: var(--background-color-yellow);
}

.button-view[data-weight='solid'][data-color='lime'] {
  background-color: var(--background-color-lime);
  color: var(--color-on-solid);
  border-color: var(--background-color-lime);
}

.button-view[data-weight='solid'][data-color='green'] {
  background-color: var(--background-color-green);
  color: var(--color-on-solid);
  border-color: var(--background-color-green);
}

.button-view[data-weight='solid'][data-color='mint'] {
  background-color: var(--background-color-mint);
  color: var(--color-on-solid);
  border-color: var(--background-color-mint);
}

.button-view[data-weight='solid'][data-color='cyan'] {
  background-color: var(--background-color-cyan);
  color: var(--color-on-solid);
  border-color: var(--background-color-cyan);
}

.button-view[data-weight='solid'][data-color='blue'] {
  background-color: var(--background-color-blue);
  color: var(--color-on-solid);
  border-color: var(--background-color-blue);
}

.button-view[data-weight='solid'][data-color='indigo'] {
  background-color: var(--background-color-indigo);
  color: var(--color-on-solid);
  border-color: var(--background-color-indigo);
}

.button-view[data-weight='solid'][data-color='violet'] {
  background-color: var(--background-color-violet);
  color: var(--color-on-solid);
  border-color: var(--background-color-violet);
}

.button-view[data-weight='solid'][data-color='magenta'] {
  background-color: var(--background-color-magenta);
  color: var(--color-on-solid);
  border-color: var(--background-color-magenta);
}

.button-view[data-weight='solid'][data-color='pink'] {
  background-color: var(--background-color-pink);
  color: var(--color-on-solid);
  border-color: var(--background-color-pink);
}

.button-view[data-weight='static'][data-color='red'] {
  background-color: var(--background-color-base);
  color: var(--color-base);
  border-color: var(--border-color-red);
}

.button-view[data-weight='static'][data-color='orange'] {
  background-color: var(--background-color-base);
  color: var(--color-base);
  border-color: var(--border-color-orange);
}

.button-view[data-weight='static'][data-color='yellow'] {
  background-color: var(--background-color-base);
  color: var(--color-base);
  border-color: var(--border-color-yellow);
}

.button-view[data-weight='static'][data-color='lime'] {
  background-color: var(--background-color-base);
  color: var(--color-base);
  border-color: var(--border-color-lime);
}

.button-view[data-weight='static'][data-color='green'] {
  background-color: var(--background-color-base);
  color: var(--color-base);
  border-color: var(--border-color-green);
}

.button-view[data-weight='static'][data-color='mint'] {
  background-color: var(--background-color-base);
  color: var(--color-base);
  border-color: var(--border-color-mint);
}

.button-view[data-weight='static'][data-color='cyan'] {
  background-color: var(--background-color-base);
  color: var(--color-base);
  border-color: var(--border-color-cyan);
}

.button-view[data-weight='static'][data-color='blue'] {
  background-color: var(--background-color-base);
  color: var(--color-base);
  border-color: var(--border-color-blue);
}

.button-view[data-weight='static'][data-color='indigo'] {
  background-color: var(--background-color-base);
  color: var(--color-base);
  border-color: var(--border-color-indigo);
}

.button-view[data-weight='static'][data-color='violet'] {
  background-color: var(--background-color-base);
  color: var(--color-base);
  border-color: var(--border-color-violet);
}

.button-view[data-weight='static'][data-color='magenta'] {
  background-color: var(--background-color-base);
  color: var(--color-base);
  border-color: var(--border-color-magenta);
}

.button-view[data-weight='static'][data-color='pink'] {
  background-color: var(--background-color-base);
  color: var(--color-base);
  border-color: var(--border-color-pink);
}

.button-view[data-weight='subtle'][data-color='gray']:hover:not(:disabled) {
  background-color: var(--background-color-interactive-subtle-hover) !important;
}

.button-view[data-weight='subtle'][data-color='gray']:active:not(:disabled) {
  background-color: var(--background-color-interactive-subtle-active) !important;
  color: var(--color-emphasized) !important;
  border-color: var(--border-color-base) !important;
}

.button-view[data-weight='solid'][data-color='gray']:hover:not(:disabled) {
  background-color: var(--background-color-interactive-hover) !important;
}

.button-view[data-weight='solid'][data-color='gray']:active:not(:disabled) {
  background-color: var(--background-color-interactive-active) !important;
  color: var(--color-emphasized) !important;
  border-color: var(--border-color-base) !important;
}

.button-view[data-weight='quiet'][data-color='gray']:hover:not(:disabled) {
  background-color: var(--background-color-base-hover) !important;
  border-color: transparent !important;
}

.button-view[data-weight='quiet'][data-color='gray']:active:not(:disabled), .button-view[data-weight='quiet'][data-color='gray'][aria-pressed='true'] {
  background-color: var(--background-color-base-active) !important;
  color: var(--color-emphasized) !important;
  border-color: transparent !important;
}

.button-view[data-weight='plain'][data-color='gray']:hover:not(:disabled) {
  color: var(--color-base) !important;
  border-color: transparent !important;
}

.button-view[data-weight='plain'][data-color='gray']:active:not(:disabled) {
  color: var(--color-emphasized) !important;
  border-color: transparent !important;
}

.button-view[data-weight='subtle'][data-color='red']:hover:not(:disabled) {
  background-color: var(--background-color-red-subtle-hover) !important;
  border-color: var(--border-color-red-hover) !important;
}

.button-view[data-weight='subtle'][data-color='orange']:hover:not(:disabled) {
  background-color: var(--background-color-orange-subtle-hover) !important;
  border-color: var(--border-color-orange-hover) !important;
}

.button-view[data-weight='subtle'][data-color='yellow']:hover:not(:disabled) {
  background-color: var(--background-color-yellow-subtle-hover) !important;
  border-color: var(--border-color-yellow-hover) !important;
}

.button-view[data-weight='subtle'][data-color='lime']:hover:not(:disabled) {
  background-color: var(--background-color-lime-subtle-hover) !important;
  border-color: var(--border-color-lime-hover) !important;
}

.button-view[data-weight='subtle'][data-color='green']:hover:not(:disabled) {
  background-color: var(--background-color-green-subtle-hover) !important;
  border-color: var(--border-color-green-hover) !important;
}

.button-view[data-weight='subtle'][data-color='mint']:hover:not(:disabled) {
  background-color: var(--background-color-mint-subtle-hover) !important;
  border-color: var(--border-color-mint-hover) !important;
}

.button-view[data-weight='subtle'][data-color='cyan']:hover:not(:disabled) {
  background-color: var(--background-color-cyan-subtle-hover) !important;
  border-color: var(--border-color-cyan-hover) !important;
}

.button-view[data-weight='subtle'][data-color='blue']:hover:not(:disabled) {
  background-color: var(--background-color-blue-subtle-hover) !important;
  border-color: var(--border-color-blue-hover) !important;
}

.button-view[data-weight='subtle'][data-color='indigo']:hover:not(:disabled) {
  background-color: var(--background-color-indigo-subtle-hover) !important;
  border-color: var(--border-color-indigo-hover) !important;
}

.button-view[data-weight='subtle'][data-color='violet']:hover:not(:disabled) {
  background-color: var(--background-color-violet-subtle-hover) !important;
  border-color: var(--border-color-violet-hover) !important;
}

.button-view[data-weight='subtle'][data-color='magenta']:hover:not(:disabled) {
  background-color: var(--background-color-magenta-subtle-hover) !important;
  border-color: var(--border-color-magenta-hover) !important;
}

.button-view[data-weight='subtle'][data-color='pink']:hover:not(:disabled) {
  background-color: var(--background-color-pink-subtle-hover) !important;
  border-color: var(--border-color-pink-hover) !important;
}

.button-view[data-weight='subtle'][data-color='red']:active:not(:disabled) {
  background-color: var(--background-color-red-subtle-active) !important;
  border-color: var(--border-color-red-active) !important;
  color: var(--color-red-active) !important;
}

.button-view[data-weight='subtle'][data-color='orange']:active:not(:disabled) {
  background-color: var(--background-color-orange-subtle-active) !important;
  border-color: var(--border-color-orange-active) !important;
  color: var(--color-orange-active) !important;
}

.button-view[data-weight='subtle'][data-color='yellow']:active:not(:disabled) {
  background-color: var(--background-color-yellow-subtle-active) !important;
  border-color: var(--border-color-yellow-active) !important;
  color: var(--color-yellow-active) !important;
}

.button-view[data-weight='subtle'][data-color='lime']:active:not(:disabled) {
  background-color: var(--background-color-lime-subtle-active) !important;
  border-color: var(--border-color-lime-active) !important;
  color: var(--color-lime-active) !important;
}

.button-view[data-weight='subtle'][data-color='green']:active:not(:disabled) {
  background-color: var(--background-color-green-subtle-active) !important;
  border-color: var(--border-color-green-active) !important;
  color: var(--color-green-active) !important;
}

.button-view[data-weight='subtle'][data-color='mint']:active:not(:disabled) {
  background-color: var(--background-color-mint-subtle-active) !important;
  border-color: var(--border-color-mint-active) !important;
  color: var(--color-mint-active) !important;
}

.button-view[data-weight='subtle'][data-color='cyan']:active:not(:disabled) {
  background-color: var(--background-color-cyan-subtle-active) !important;
  border-color: var(--border-color-cyan-active) !important;
  color: var(--color-cyan-active) !important;
}

.button-view[data-weight='subtle'][data-color='blue']:active:not(:disabled) {
  background-color: var(--background-color-blue-subtle-active) !important;
  border-color: var(--border-color-blue-active) !important;
  color: var(--color-blue-active) !important;
}

.button-view[data-weight='subtle'][data-color='indigo']:active:not(:disabled) {
  background-color: var(--background-color-indigo-subtle-active) !important;
  border-color: var(--border-color-indigo-active) !important;
  color: var(--color-indigo-active) !important;
}

.button-view[data-weight='subtle'][data-color='violet']:active:not(:disabled) {
  background-color: var(--background-color-violet-subtle-active) !important;
  border-color: var(--border-color-violet-active) !important;
  color: var(--color-violet-active) !important;
}

.button-view[data-weight='subtle'][data-color='magenta']:active:not(:disabled) {
  background-color: var(--background-color-magenta-subtle-active) !important;
  border-color: var(--border-color-magenta-active) !important;
  color: var(--color-magenta-active) !important;
}

.button-view[data-weight='subtle'][data-color='pink']:active:not(:disabled) {
  background-color: var(--background-color-pink-subtle-active) !important;
  border-color: var(--border-color-pink-active) !important;
  color: var(--color-pink-active) !important;
}

.button-view[data-weight='solid'][data-color='red']:hover:not(:disabled) {
  background-color: var(--background-color-red-hover) !important;
  border-color: var(--border-color-red-hover) !important;
}

.button-view[data-weight='solid'][data-color='orange']:hover:not(:disabled) {
  background-color: var(--background-color-orange-hover) !important;
  border-color: var(--border-color-orange-hover) !important;
}

.button-view[data-weight='solid'][data-color='yellow']:hover:not(:disabled) {
  background-color: var(--background-color-yellow-hover) !important;
  border-color: var(--border-color-yellow-hover) !important;
}

.button-view[data-weight='solid'][data-color='lime']:hover:not(:disabled) {
  background-color: var(--background-color-lime-hover) !important;
  border-color: var(--border-color-lime-hover) !important;
}

.button-view[data-weight='solid'][data-color='green']:hover:not(:disabled) {
  background-color: var(--background-color-green-hover) !important;
  border-color: var(--border-color-green-hover) !important;
}

.button-view[data-weight='solid'][data-color='mint']:hover:not(:disabled) {
  background-color: var(--background-color-mint-hover) !important;
  border-color: var(--border-color-mint-hover) !important;
}

.button-view[data-weight='solid'][data-color='cyan']:hover:not(:disabled) {
  background-color: var(--background-color-cyan-hover) !important;
  border-color: var(--border-color-cyan-hover) !important;
}

.button-view[data-weight='solid'][data-color='blue']:hover:not(:disabled) {
  background-color: var(--background-color-blue-hover) !important;
  border-color: var(--border-color-blue-hover) !important;
}

.button-view[data-weight='solid'][data-color='indigo']:hover:not(:disabled) {
  background-color: var(--background-color-indigo-hover) !important;
  border-color: var(--border-color-indigo-hover) !important;
}

.button-view[data-weight='solid'][data-color='violet']:hover:not(:disabled) {
  background-color: var(--background-color-violet-hover) !important;
  border-color: var(--border-color-violet-hover) !important;
}

.button-view[data-weight='solid'][data-color='magenta']:hover:not(:disabled) {
  background-color: var(--background-color-magenta-hover) !important;
  border-color: var(--border-color-magenta-hover) !important;
}

.button-view[data-weight='solid'][data-color='pink']:hover:not(:disabled) {
  background-color: var(--background-color-pink-hover) !important;
  border-color: var(--border-color-pink-hover) !important;
}

.button-view[data-weight='solid'][data-color='red']:active:not(:disabled) {
  background-color: var(--background-color-red-active) !important;
  border-color: var(--border-color-red-active) !important;
}

.button-view[data-weight='solid'][data-color='orange']:active:not(:disabled) {
  background-color: var(--background-color-orange-active) !important;
  border-color: var(--border-color-orange-active) !important;
}

.button-view[data-weight='solid'][data-color='yellow']:active:not(:disabled) {
  background-color: var(--background-color-yellow-active) !important;
  border-color: var(--border-color-yellow-active) !important;
}

.button-view[data-weight='solid'][data-color='lime']:active:not(:disabled) {
  background-color: var(--background-color-lime-active) !important;
  border-color: var(--border-color-lime-active) !important;
}

.button-view[data-weight='solid'][data-color='green']:active:not(:disabled) {
  background-color: var(--background-color-green-active) !important;
  border-color: var(--border-color-green-active) !important;
}

.button-view[data-weight='solid'][data-color='mint']:active:not(:disabled) {
  background-color: var(--background-color-mint-active) !important;
  border-color: var(--border-color-mint-active) !important;
}

.button-view[data-weight='solid'][data-color='cyan']:active:not(:disabled) {
  background-color: var(--background-color-cyan-active) !important;
  border-color: var(--border-color-cyan-active) !important;
}

.button-view[data-weight='solid'][data-color='blue']:active:not(:disabled) {
  background-color: var(--background-color-blue-active) !important;
  border-color: var(--border-color-blue-active) !important;
}

.button-view[data-weight='solid'][data-color='indigo']:active:not(:disabled) {
  background-color: var(--background-color-indigo-active) !important;
  border-color: var(--border-color-indigo-active) !important;
}

.button-view[data-weight='solid'][data-color='violet']:active:not(:disabled) {
  background-color: var(--background-color-violet-active) !important;
  border-color: var(--border-color-violet-active) !important;
}

.button-view[data-weight='solid'][data-color='magenta']:active:not(:disabled) {
  background-color: var(--background-color-magenta-active) !important;
  border-color: var(--border-color-magenta-active) !important;
}

.button-view[data-weight='solid'][data-color='pink']:active:not(:disabled) {
  background-color: var(--background-color-pink-active) !important;
  border-color: var(--border-color-pink-active) !important;
}

.button-view[data-weight='quiet'][data-color='red']:hover:not(:disabled) {
  background-color: var(--background-color-red-subtle) !important;
}

.button-view[data-weight='quiet'][data-color='orange']:hover:not(:disabled) {
  background-color: var(--background-color-orange-subtle) !important;
}

.button-view[data-weight='quiet'][data-color='yellow']:hover:not(:disabled) {
  background-color: var(--background-color-yellow-subtle) !important;
}

.button-view[data-weight='quiet'][data-color='lime']:hover:not(:disabled) {
  background-color: var(--background-color-lime-subtle) !important;
}

.button-view[data-weight='quiet'][data-color='green']:hover:not(:disabled) {
  background-color: var(--background-color-green-subtle) !important;
}

.button-view[data-weight='quiet'][data-color='mint']:hover:not(:disabled) {
  background-color: var(--background-color-mint-subtle) !important;
}

.button-view[data-weight='quiet'][data-color='cyan']:hover:not(:disabled) {
  background-color: var(--background-color-cyan-subtle) !important;
}

.button-view[data-weight='quiet'][data-color='blue']:hover:not(:disabled) {
  background-color: var(--background-color-blue-subtle) !important;
}

.button-view[data-weight='quiet'][data-color='indigo']:hover:not(:disabled) {
  background-color: var(--background-color-indigo-subtle) !important;
}

.button-view[data-weight='quiet'][data-color='violet']:hover:not(:disabled) {
  background-color: var(--background-color-violet-subtle) !important;
}

.button-view[data-weight='quiet'][data-color='magenta']:hover:not(:disabled) {
  background-color: var(--background-color-magenta-subtle) !important;
}

.button-view[data-weight='quiet'][data-color='pink']:hover:not(:disabled) {
  background-color: var(--background-color-pink-subtle) !important;
}

.button-view[data-weight='quiet'][data-color='red']:active:not(:disabled), .button-view[data-weight='quiet'][data-color='red'][aria-pressed='true'] {
  background-color: var(--background-color-red-subtle-active) !important;
  color: var(--color-red-active) !important;
}

.button-view[data-weight='quiet'][data-color='orange']:active:not(:disabled), .button-view[data-weight='quiet'][data-color='orange'][aria-pressed='true'] {
  background-color: var(--background-color-orange-subtle-active) !important;
  color: var(--color-orange-active) !important;
}

.button-view[data-weight='quiet'][data-color='yellow']:active:not(:disabled), .button-view[data-weight='quiet'][data-color='yellow'][aria-pressed='true'] {
  background-color: var(--background-color-yellow-subtle-active) !important;
  color: var(--color-yellow-active) !important;
}

.button-view[data-weight='quiet'][data-color='lime']:active:not(:disabled), .button-view[data-weight='quiet'][data-color='lime'][aria-pressed='true'] {
  background-color: var(--background-color-lime-subtle-active) !important;
  color: var(--color-lime-active) !important;
}

.button-view[data-weight='quiet'][data-color='green']:active:not(:disabled), .button-view[data-weight='quiet'][data-color='green'][aria-pressed='true'] {
  background-color: var(--background-color-green-subtle-active) !important;
  color: var(--color-green-active) !important;
}

.button-view[data-weight='quiet'][data-color='mint']:active:not(:disabled), .button-view[data-weight='quiet'][data-color='mint'][aria-pressed='true'] {
  background-color: var(--background-color-mint-subtle-active) !important;
  color: var(--color-mint-active) !important;
}

.button-view[data-weight='quiet'][data-color='cyan']:active:not(:disabled), .button-view[data-weight='quiet'][data-color='cyan'][aria-pressed='true'] {
  background-color: var(--background-color-cyan-subtle-active) !important;
  color: var(--color-cyan-active) !important;
}

.button-view[data-weight='quiet'][data-color='blue']:active:not(:disabled), .button-view[data-weight='quiet'][data-color='blue'][aria-pressed='true'] {
  background-color: var(--background-color-blue-subtle-active) !important;
  color: var(--color-blue-active) !important;
}

.button-view[data-weight='quiet'][data-color='indigo']:active:not(:disabled), .button-view[data-weight='quiet'][data-color='indigo'][aria-pressed='true'] {
  background-color: var(--background-color-indigo-subtle-active) !important;
  color: var(--color-indigo-active) !important;
}

.button-view[data-weight='quiet'][data-color='violet']:active:not(:disabled), .button-view[data-weight='quiet'][data-color='violet'][aria-pressed='true'] {
  background-color: var(--background-color-violet-subtle-active) !important;
  color: var(--color-violet-active) !important;
}

.button-view[data-weight='quiet'][data-color='magenta']:active:not(:disabled), .button-view[data-weight='quiet'][data-color='magenta'][aria-pressed='true'] {
  background-color: var(--background-color-magenta-subtle-active) !important;
  color: var(--color-magenta-active) !important;
}

.button-view[data-weight='quiet'][data-color='pink']:active:not(:disabled), .button-view[data-weight='quiet'][data-color='pink'][aria-pressed='true'] {
  background-color: var(--background-color-pink-subtle-active) !important;
  color: var(--color-pink-active) !important;
}

.button-view[data-weight='plain'][data-color='red']:hover:not(:disabled) {
  color: var(--color-red-hover) !important;
}

.button-view[data-weight='plain'][data-color='orange']:hover:not(:disabled) {
  color: var(--color-orange-hover) !important;
}

.button-view[data-weight='plain'][data-color='yellow']:hover:not(:disabled) {
  color: var(--color-yellow-hover) !important;
}

.button-view[data-weight='plain'][data-color='lime']:hover:not(:disabled) {
  color: var(--color-lime-hover) !important;
}

.button-view[data-weight='plain'][data-color='green']:hover:not(:disabled) {
  color: var(--color-green-hover) !important;
}

.button-view[data-weight='plain'][data-color='mint']:hover:not(:disabled) {
  color: var(--color-mint-hover) !important;
}

.button-view[data-weight='plain'][data-color='cyan']:hover:not(:disabled) {
  color: var(--color-cyan-hover) !important;
}

.button-view[data-weight='plain'][data-color='blue']:hover:not(:disabled) {
  color: var(--color-blue-hover) !important;
}

.button-view[data-weight='plain'][data-color='indigo']:hover:not(:disabled) {
  color: var(--color-indigo-hover) !important;
}

.button-view[data-weight='plain'][data-color='violet']:hover:not(:disabled) {
  color: var(--color-violet-hover) !important;
}

.button-view[data-weight='plain'][data-color='magenta']:hover:not(:disabled) {
  color: var(--color-magenta-hover) !important;
}

.button-view[data-weight='plain'][data-color='pink']:hover:not(:disabled) {
  color: var(--color-pink-hover) !important;
}

.button-view[data-weight='plain'][data-color='red']:active:not(:disabled) {
  color: var(--color-red-active) !important;
}

.button-view[data-weight='plain'][data-color='orange']:active:not(:disabled) {
  color: var(--color-orange-active) !important;
}

.button-view[data-weight='plain'][data-color='yellow']:active:not(:disabled) {
  color: var(--color-yellow-active) !important;
}

.button-view[data-weight='plain'][data-color='lime']:active:not(:disabled) {
  color: var(--color-lime-active) !important;
}

.button-view[data-weight='plain'][data-color='green']:active:not(:disabled) {
  color: var(--color-green-active) !important;
}

.button-view[data-weight='plain'][data-color='mint']:active:not(:disabled) {
  color: var(--color-mint-active) !important;
}

.button-view[data-weight='plain'][data-color='cyan']:active:not(:disabled) {
  color: var(--color-cyan-active) !important;
}

.button-view[data-weight='plain'][data-color='blue']:active:not(:disabled) {
  color: var(--color-blue-active) !important;
}

.button-view[data-weight='plain'][data-color='indigo']:active:not(:disabled) {
  color: var(--color-indigo-active) !important;
}

.button-view[data-weight='plain'][data-color='violet']:active:not(:disabled) {
  color: var(--color-violet-active) !important;
}

.button-view[data-weight='plain'][data-color='magenta']:active:not(:disabled) {
  color: var(--color-magenta-active) !important;
}

.button-view[data-weight='plain'][data-color='pink']:active:not(:disabled) {
  color: var(--color-pink-active) !important;
}

.button-view[data-weight='quiet']:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}

.button-view[data-weight='plain']:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}

.button-view[aria-disabled='true'] {
  color: var(--color-disabled) !important;
  cursor: var(--cursor-not-allowed) !important;
}

.button-view[data-weight='quiet'][aria-disabled='true'], .button-view[data-weight='plain'][aria-disabled='true'] {
  background-color: var(--background-color-transparent) !important;
  border-color: transparent !important;
}

.button-view[data-weight='subtle'][aria-disabled='true'], .button-view[data-weight='solid'][aria-disabled='true'], .button-view[data-weight='static'][aria-disabled='true'] {
  background-color: var(--background-color-disabled) !important;
  border-color: var(--border-color-disabled) !important;
}