.sw-button {
  background: var(--button-background-color);
  border: none;
  border-radius: var(--border-radius);
  color: var(--button-color);
  display: inline-flex;
  font-family: inherit;
  font-size: var(--font-size-medium);
  justify-content: center;
  line-height: var(--line-height-body);
  margin: 0;
  outline: 0;
  padding: var(--rhythm-1) var(--rhythm-2);
  transition: background-color var(--transition-superfast), box-shadow var(--transition-superfast),
    color var(--transition-superfast);
  white-space: nowrap;

  &:focus-visible {
    box-shadow: var(--focus-shadow);
    outline: 0;
  }
  svg:focus {
    outline: 0;
  }
  &.icon {
    border-radius: 50%;
    padding: var(--rhythm-1);
  }

  &:not(:disabled) {
    cursor: pointer;
  }
  &:not(:disabled):hover {
    background: var(--button-background-color-hover);
    color: var(--button-color-hover);
  }
  &:not(:disabled):active,
  &:not(:disabled).active {
    background: var(--button-background-color-active);
    color: var(--button-color-active);
  }
  &:not(.small):not(.xsmall):not(.icon) {
    min-width: var(--rhythm-12);
  }

  .button-label {
    font-weight: var(--font-weight-semi-bold);
    display: flex;
    align-items: center;
  }

  &.small:not(.icon),
  &.xsmall:not(.icon) {
    font-size: calc(var(--font-size-base) * 0.75);
    line-height: var(--rhythm-3);
    padding: var(--rhythm-0_5) var(--rhythm-2);
  }
  &.xsmall.icon,
  &.small.icon {
    padding: var(--rhythm-0_5);
  }
  &.large {
    padding: var(--rhythm-1_5);
  }

  &.solid.primary {
    --button-background-color: var(--color-primary-regular);
    --button-background-color-hover: var(--color-primary-strong);
    --button-background-color-active: var(--color-primary-stronger);
    --button-color: var(--color-light-stronger);
    --button-color-hover: var(--color-light-stronger);
    --button-color-active: var(--color-light-stronger);
  }

  &.solid.secondary {
    --button-background-color: var(--color-dark-stronger);
    --button-background-color-hover: var(--color-dark-stronger);
    --button-background-color-active: var(--color-neutral-light);
    --button-color: var(--color-light-stronger);
    --button-color-hover: var(--color-light-stronger);
    --button-color-active: var(--color-light-stronger);
  }

  &.solid:disabled {
    --button-background-color: var(--color-neutral-lighter);
    --button-color: var(--color-light-stronger);
  }

  &.basic.primary {
    --button-background-color: transparent;
    --button-background-color-hover: var(--color-primary-lightest);
    --button-background-color-active: var(--color-primary-lighter);
    --button-color: var(--color-primary-regular);
    --button-color-hover: var(--color-primary-regular);
    --button-color-active: var(--color-primary-regular);
  }

  &.basic.secondary {
    --button-background-color: transparent;
    --button-background-color-hover: var(--color-neutral-light);
    --button-background-color-active: var(--color-neutral-regular);
    --button-color: inherit;
    --button-color-hover: inherit;
    --button-color-active: var(--color-light-stronger);
  }

  &.basic:disabled {
    --button-color: var(--color-neutral-light);
  }
}
