.grit-button-primary {
  background-color: var(--grit-button-primary);
  color: var(--grit-button-primary-contrast);
  transform: scale(1);
  border: none;
}
.grit-button-primary:not(:disabled):not(.is-disabled):not(.is-loading):hover, .grit-button-primary:not(:disabled):not(.is-disabled):not(.is-loading):focus {
  background-color: var(--grit-button-primary-hover);
  color: var(--grit-button-primary-contrast-hover);
  transform: scale(1);
}
.grit-button-primary:not(:disabled):not(.is-disabled):not(.is-loading):focus {
  outline-offset: 2px;
}
.grit-button-primary:not(:disabled):not(.is-disabled):not(.is-loading):active {
  background-color: var(--grit-button-primary-press);
  color: var(--grit-button-primary-contrast-press);
  transform: scale(0.96);
}
.grit-button-primary .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-primary-contrast) !important;
}
.grit-button-primary:hover .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-primary-contrast-hover) !important;
}
.grit-button-primary:active .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-primary-contrast-press) !important;
}
.grit-button-primary.is-disabled {
  background-color: var(--grit-button-primary);
  color: var(--grit-button-primary-contrast);
  border-width: 1px;
  opacity: var(--button-disabled-opacity);
}
.grit-button-primary.is-disabled .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-primary-disable-color) !important;
}
.grit-button-primary-light {
  border: none;
  background-color: var(--grit-button-light-background);
  color: var(--grit-button-primary-light);
  transform: scale(1);
}
.grit-button-primary-light:not(:disabled):not(.is-disabled):not(.is-loading):hover, .grit-button-primary-light:not(:disabled):not(.is-disabled):not(.is-loading):focus {
  background-color: var(--grit-button-light-background-hover);
  color: var(--grit-button-primary-light-hover);
  transform: scale(1);
}
.grit-button-primary-light:not(:disabled):not(.is-disabled):not(.is-loading):active {
  background-color: var(--grit-button-light-background-press);
  color: var(--grit-button-primary-light-press);
  transform: scale(0.96);
}
.grit-button-primary-light .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-primary-light) !important;
}
.grit-button-primary-light:hover .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-primary-light-hover) !important;
}
.grit-button-primary-light:active .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-primary-light-press) !important;
}
.grit-button-primary-light.is-disabled {
  background-color: var(--neutral100);
  color: var(--blue300);
  opacity: var(--button-disabled-opacity);
}
.grit-button-primary-light.is-disabled .icon-slot ::slotted(.grit-icon) {
  color: var(--blue300) !important;
}

.grit-button-secondary {
  background-color: var(--grit-button-secondary);
  color: var(--grit-button-secondary-contrast);
  transform: scale(1);
  border: none;
}
.grit-button-secondary:not(:disabled):not(.is-disabled):not(.is-loading):hover, .grit-button-secondary:not(:disabled):not(.is-disabled):not(.is-loading):focus {
  background-color: var(--grit-button-secondary-hover);
  color: var(--grit-button-secondary-contrast-hover);
  transform: scale(1);
}
.grit-button-secondary:not(:disabled):not(.is-disabled):not(.is-loading):focus {
  outline-offset: 2px;
}
.grit-button-secondary:not(:disabled):not(.is-disabled):not(.is-loading):active {
  background-color: var(--grit-button-secondary-press);
  color: var(--grit-button-secondary-contrast-press);
  transform: scale(0.96);
}
.grit-button-secondary .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-secondary-contrast) !important;
}
.grit-button-secondary:hover .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-secondary-contrast-hover) !important;
}
.grit-button-secondary:active .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-secondary-contrast-press) !important;
}
.grit-button-secondary.is-disabled {
  background-color: var(--grit-button-secondary);
  color: var(--grit-button-secondary-contrast);
  border-width: 1px;
  opacity: var(--button-disabled-opacity);
}
.grit-button-secondary.is-disabled .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-secondary-disable-color) !important;
}
.grit-button-secondary-light {
  border: none;
  background-color: var(--grit-button-light-background);
  color: var(--grit-button-secondary-light);
  transform: scale(1);
}
.grit-button-secondary-light:not(:disabled):not(.is-disabled):not(.is-loading):hover, .grit-button-secondary-light:not(:disabled):not(.is-disabled):not(.is-loading):focus {
  background-color: var(--grit-button-light-background-hover);
  color: var(--grit-button-secondary-light-hover);
  transform: scale(1);
}
.grit-button-secondary-light:not(:disabled):not(.is-disabled):not(.is-loading):active {
  background-color: var(--grit-button-light-background-press);
  color: var(--grit-button-secondary-light-press);
  transform: scale(0.96);
}
.grit-button-secondary-light .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-secondary-light) !important;
}
.grit-button-secondary-light:hover .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-secondary-light-hover) !important;
}
.grit-button-secondary-light:active .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-secondary-light-press) !important;
}
.grit-button-secondary-light.is-disabled {
  background-color: var(--neutral100);
  color: var(--neutral600);
  opacity: var(--button-disabled-opacity);
}
.grit-button-secondary-light.is-disabled .icon-slot ::slotted(.grit-icon) {
  color: var(--neutral600) !important;
}

.grit-button-subtle {
  background-color: var(--grit-button-subtle);
  color: var(--grit-button-subtle-contrast);
  transform: scale(1);
  border: 1px solid var(--grit-button-subtle-border);
}
.grit-button-subtle:not(:disabled):not(.is-disabled):not(.is-loading):hover, .grit-button-subtle:not(:disabled):not(.is-disabled):not(.is-loading):focus {
  background-color: var(--grit-button-subtle-hover);
  color: var(--grit-button-subtle-contrast-hover);
  transform: scale(1);
}
.grit-button-subtle:not(:disabled):not(.is-disabled):not(.is-loading):focus {
  outline-offset: 2px;
}
.grit-button-subtle:not(:disabled):not(.is-disabled):not(.is-loading):active {
  background-color: var(--grit-button-subtle-press);
  color: var(--grit-button-subtle-contrast-press);
  transform: scale(0.96);
}
.grit-button-subtle .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-subtle-contrast) !important;
}
.grit-button-subtle:hover .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-subtle-contrast-hover) !important;
}
.grit-button-subtle:active .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-subtle-contrast-press) !important;
}
.grit-button-subtle.is-disabled {
  background-color: var(--grit-button-subtle);
  color: var(--grit-button-subtle-contrast);
  border-width: 1px;
  opacity: var(--button-disabled-opacity-subtle);
  border-color: --grit-button-subtle-border;
}
.grit-button-subtle.is-disabled .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-subtle-disable-color) !important;
}
.grit-button-subtle-light {
  border: none;
  background-color: var(--grit-button-light-background);
  color: var(--grit-button-subtle-light);
  transform: scale(1);
}
.grit-button-subtle-light:not(:disabled):not(.is-disabled):not(.is-loading):hover, .grit-button-subtle-light:not(:disabled):not(.is-disabled):not(.is-loading):focus {
  background-color: var(--grit-button-light-background-hover);
  color: var(--grit-button-subtle-light-hover);
  transform: scale(1);
}
.grit-button-subtle-light:not(:disabled):not(.is-disabled):not(.is-loading):active {
  background-color: var(--grit-button-light-background-press);
  color: var(--grit-button-subtle-light-press);
  transform: scale(0.96);
}
.grit-button-subtle-light .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-subtle-light) !important;
}
.grit-button-subtle-light:hover .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-subtle-light-hover) !important;
}
.grit-button-subtle-light:active .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-subtle-light-press) !important;
}
.grit-button-subtle-light.is-disabled {
  background-color: var(--neutral100);
  color: var(--neutral600);
  opacity: var(--button-disabled-opacity-subtle);
}
.grit-button-subtle-light.is-disabled .icon-slot ::slotted(.grit-icon) {
  color: var(--neutral600) !important;
}

.grit-button-success {
  background-color: var(--grit-button-success);
  color: var(--grit-button-success-contrast);
  transform: scale(1);
  border: none;
}
.grit-button-success:not(:disabled):not(.is-disabled):not(.is-loading):hover, .grit-button-success:not(:disabled):not(.is-disabled):not(.is-loading):focus {
  background-color: var(--grit-button-success-hover);
  color: var(--grit-button-success-contrast-hover);
  transform: scale(1);
}
.grit-button-success:not(:disabled):not(.is-disabled):not(.is-loading):focus {
  outline-offset: 2px;
}
.grit-button-success:not(:disabled):not(.is-disabled):not(.is-loading):active {
  background-color: var(--grit-button-success-press);
  color: var(--grit-button-success-contrast-press);
  transform: scale(0.96);
}
.grit-button-success .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-success-contrast) !important;
}
.grit-button-success:hover .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-success-contrast-hover) !important;
}
.grit-button-success:active .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-success-contrast-press) !important;
}
.grit-button-success.is-disabled {
  background-color: var(--grit-button-success);
  color: var(--grit-button-success-contrast);
  border-width: 1px;
  opacity: var(--button-disabled-opacity);
}
.grit-button-success.is-disabled .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-success-disable-color) !important;
}
.grit-button-success-light {
  border: none;
  background-color: var(--grit-button-light-background);
  color: var(--grit-button-success-light);
  transform: scale(1);
}
.grit-button-success-light:not(:disabled):not(.is-disabled):not(.is-loading):hover, .grit-button-success-light:not(:disabled):not(.is-disabled):not(.is-loading):focus {
  background-color: var(--grit-button-light-background-hover);
  color: var(--grit-button-success-light-hover);
  transform: scale(1);
}
.grit-button-success-light:not(:disabled):not(.is-disabled):not(.is-loading):active {
  background-color: var(--grit-button-light-background-press);
  color: var(--grit-button-success-light-press);
  transform: scale(0.96);
}
.grit-button-success-light .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-success-light) !important;
}
.grit-button-success-light:hover .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-success-light-hover) !important;
}
.grit-button-success-light:active .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-success-light-press) !important;
}
.grit-button-success-light.is-disabled {
  background-color: var(--neutral100);
  color: var(--green300);
  opacity: var(--button-disabled-opacity);
}
.grit-button-success-light.is-disabled .icon-slot ::slotted(.grit-icon) {
  color: var(--green300) !important;
}

.grit-button-destroy {
  background-color: var(--grit-button-destroy);
  color: var(--grit-button-destroy-contrast);
  transform: scale(1);
  border: none;
}
.grit-button-destroy:not(:disabled):not(.is-disabled):not(.is-loading):hover, .grit-button-destroy:not(:disabled):not(.is-disabled):not(.is-loading):focus {
  background-color: var(--grit-button-destroy-hover);
  color: var(--grit-button-destroy-contrast-hover);
  transform: scale(1);
}
.grit-button-destroy:not(:disabled):not(.is-disabled):not(.is-loading):focus {
  outline-offset: 2px;
}
.grit-button-destroy:not(:disabled):not(.is-disabled):not(.is-loading):active {
  background-color: var(--grit-button-destroy-press);
  color: var(--grit-button-destroy-contrast-press);
  transform: scale(0.96);
}
.grit-button-destroy .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-destroy-contrast) !important;
}
.grit-button-destroy:hover .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-destroy-contrast-hover) !important;
}
.grit-button-destroy:active .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-destroy-contrast-press) !important;
}
.grit-button-destroy.is-disabled {
  background-color: var(--grit-button-destroy);
  color: var(--grit-button-destroy-contrast);
  border-width: 1px;
  opacity: var(--button-disabled-opacity);
}
.grit-button-destroy.is-disabled .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-destroy-disable-color) !important;
}
.grit-button-destroy-light {
  border: none;
  background-color: var(--grit-button-light-background);
  color: var(--grit-button-destroy-light);
  transform: scale(1);
}
.grit-button-destroy-light:not(:disabled):not(.is-disabled):not(.is-loading):hover, .grit-button-destroy-light:not(:disabled):not(.is-disabled):not(.is-loading):focus {
  background-color: var(--grit-button-light-background-hover);
  color: var(--grit-button-destroy-light-hover);
  transform: scale(1);
}
.grit-button-destroy-light:not(:disabled):not(.is-disabled):not(.is-loading):active {
  background-color: var(--grit-button-light-background-press);
  color: var(--grit-button-destroy-light-press);
  transform: scale(0.96);
}
.grit-button-destroy-light .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-destroy-light) !important;
}
.grit-button-destroy-light:hover .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-destroy-light-hover) !important;
}
.grit-button-destroy-light:active .icon-slot ::slotted(.grit-icon) {
  color: var(--grit-button-destroy-light-press) !important;
}
.grit-button-destroy-light.is-disabled {
  background-color: var(--neutral100);
  color: var(--red300);
  opacity: var(--button-disabled-opacity);
}
.grit-button-destroy-light.is-disabled .icon-slot ::slotted(.grit-icon) {
  color: var(--red300) !important;
}

.grit-button button,
.grit-button a {
  width: auto;
  display: inline-block;
  margin-right: 8px;
  margin-top: 0;
  cursor: pointer;
  transition: background-color 150ms, color 150ms, transform 150ms;
  transform-origin: center center;
  font-size: var(--grit-font-size-1);
  font-family: var(--grit-font-family-header);
  font-weight: bold;
  letter-spacing: var(--letter-spacing-header);
  border-radius: 1000px;
  box-sizing: border-box;
}
.grit-button a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  text-decoration: none;
}
.grit-button .grit-button-content-wrapper,
.grit-button .icon-slot {
  display: flex;
  justify-content: center;
  align-items: center;
}
.grit-button .grit-button-content-wrapper .grit-wc-spinner {
  padding: 0 4px;
}

@media (max-width: 600px) {
  .grit-button button,
.grit-button a {
    width: 100%;
  }
}
.grit-button-md {
  min-height: var(--button-height-md);
  padding: 0 24px !important;
}
.grit-button-md .icon-slot-right ::slotted(.grit-icon) {
  margin-left: 8px;
  margin-right: -8px;
}
.grit-button-md .icon-slot-left ::slotted(.grit-icon) {
  margin-right: 8px;
  margin-left: -8px;
}

.grit-button-sm {
  min-height: var(--button-height-sm);
  padding: var(--button-padding-sm);
  font-size: var(--grit-font-size-0) !important;
}
.grit-button-sm .icon-slot-right ::slotted(.grit-icon) {
  margin-left: 4px;
  margin-right: -8px;
}
.grit-button-sm .icon-slot-left ::slotted(.grit-icon) {
  margin-right: 4px;
  margin-left: -8px;
}

.grit-button-lg {
  min-height: var(--button-height-lg);
  padding: 0 40px 0 48px !important;
}
.grit-button-lg .icon-slot-right ::slotted(.grit-icon) {
  margin-left: 8px;
  margin-right: -8px;
}
.grit-button-lg .icon-slot-left ::slotted(.grit-icon) {
  margin-right: 8px;
  margin-left: -8px;
}

:host([full-width]) .grit-button button,
:host([full-width]) .grit-button a {
  width: 100%;
}

:host([disabled]) .grit-button button,
:host([disabled]) .grit-button a {
  cursor: not-allowed;
  display: inline-block;
}
:host([disabled]) .grit-button button .grit-button-content-wrapper,
:host([disabled]) .grit-button a .grit-button-content-wrapper {
  pointer-events: none;
}

:host([loading]) .grit-button button,
:host([loading]) .grit-button a {
  cursor: not-allowed;
}
:host([loading]) .grit-button button .grit-button-content-wrapper,
:host([loading]) .grit-button a .grit-button-content-wrapper {
  opacity: 0;
  height: 0;
  transform: scaleX(0.1);
}
:host([loading]) .grit-button button .grit-button-spinner,
:host([loading]) .grit-button a .grit-button-spinner {
  display: grid;
  place-content: center;
  height: 0;
}