.btn-tertiary-light-grey-2, .btn-tertiary-light-grey-1, .btn-tertiary-white, .btn-small-dark-grey, .btn-secondary-dark-grey, .btn-primary-grey-2, .btn-primary-dark-grey, .btn-primary-dark-blue, .btn-primary-blue {
  appearance: none;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-circular);
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  transition: opacity 0.15s ease, transform 0.15s ease;
  gap: 12px;
  padding: 11px 20px;
  font-size: 1rem;
  font-weight: 500;
}
.btn-tertiary-light-grey-2 span, .btn-tertiary-light-grey-1 span, .btn-tertiary-white span, .btn-small-dark-grey span, .btn-secondary-dark-grey span, .btn-primary-grey-2 span, .btn-primary-dark-grey span, .btn-primary-dark-blue span, .btn-primary-blue span {
  font-size: 1.375rem;
}
.btn-tertiary-light-grey-2:disabled, .btn-tertiary-light-grey-1:disabled, .btn-tertiary-white:disabled, .btn-small-dark-grey:disabled, .btn-secondary-dark-grey:disabled, .btn-primary-grey-2:disabled, .btn-primary-dark-grey:disabled, .btn-primary-dark-blue:disabled, .btn-primary-blue:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
  --shape-color: var(--color-dark-grey-1);
}

.btn-primary-grey-2, .btn-primary-dark-grey, .btn-primary-dark-blue, .btn-primary-blue {
  color: var(--text-color);
  background-color: var(--shape-color);
}

.btn-small-dark-grey, .btn-secondary-dark-grey {
  color: var(--shape-color);
  border-color: var(--shape-color);
}

.btn-tertiary-light-grey-2, .btn-tertiary-light-grey-1, .btn-tertiary-white {
  border: 0;
  color: var(--color-dark-grey);
  background-color: var(--shape-color);
}

.btn-primary-blue {
  --shape-color: var(--color-blue);
  --text-color: #fff;
}

.btn-primary-dark-blue {
  --shape-color: var(--color-dark-blue);
  --text-color: #fff;
}

.btn-small-dark-grey, .btn-secondary-dark-grey, .btn-primary-dark-grey {
  --shape-color: var(--color-dark-grey);
  --text-color: #fff;
}

.btn-primary-grey-2 {
  --shape-color: var(--color-grey-2);
  --text-color: #fff;
}

.btn-tertiary-white {
  --shape-color: white;
}

.btn-tertiary-light-grey-1 {
  --shape-color: var(--color-light-grey-1);
}

.btn-tertiary-light-grey-2 {
  --shape-color: var(--color-light-grey-2);
}

.btn--small, .btn-small-dark-grey {
  padding: 10px 0;
  border: 0;
}

.btn--disabled {
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
  --shape-color: var(--color-dark-grey-1);
}

.btn--wide {
  display: flex;
  width: 100%;
}

#___storybook_wrapper:has(> [class*=btn-]) {
  padding: 3rem;
  background-color: #ccc;
}