.button {
  --border-radius: var(--sds-size-radius-200);
  align-items: center;
  box-shadow: inset 0 0 0 var(--sds-size-stroke-border)
    var(--button-border-color);
  border-radius: var(--border-radius);
  background: var(--button-background-color);
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font: var(--button-font);
  gap: var(--sds-size-space-200);
  justify-content: center;
  line-height: 1;
  padding: var(--button-padding-y) var(--button-padding-x);
  position: relative;
  white-space: nowrap;

  > .icon {
    --icon-color: var(--button-color);
  }
}

.button-size-small {
  --button-font: var(--sds-font-body-small);
  --button-padding-x: var(--sds-size-space-200);
  --button-padding-y: var(--sds-size-space-200);

  > .icon {
    --icon-diameter: var(--sds-typography-scale-02);
  }
}

.button-size-medium {
  --button-font: var(--sds-font-body-base);

  --button-padding-x: var(--sds-size-space-300);
  --button-padding-y: var(--sds-size-space-300);

  > .icon {
    --icon-diameter: var(--sds-typography-scale-03);
  }
}

.button[data-focus-visible] {
  outline: none;
  --offset: calc(var(--sds-size-stroke-border) * 2);
  &::before {
    content: "";
    border-radius: calc(var(--border-radius) + var(--offset));
    bottom: calc(-1 * var(--offset));
    box-shadow: 0 0 0 var(--global-focus-ring-size)
      var(--global-focus-ring-color);
    left: calc(-1 * var(--offset));
    position: absolute;
    right: calc(-1 * var(--offset));
    top: calc(-1 * var(--offset));
  }
}

.button-variant-primary {
  --button-background-color: var(--sds-color-background-brand-default);
  --button-border-color: var(--sds-color-border-brand-default);
  --button-color: var(--sds-color-text-brand-on-brand);
  &[data-hovered]:not([data-disabled]) {
    --button-background-color: var(--sds-color-background-brand-hover);
    --button-border-color: var(--sds-color-border-brand-default);
  }
}
.button-variant-neutral {
  --button-background-color: var(--sds-color-background-default-secondary);
  --button-border-color: var(--sds-color-border-default-default);
  --button-color: var(--sds-color-text-default-default);
  &[data-hovered]:not([data-disabled]) {
    --button-background-color: var(
      --sds-color-background-default-secondary-hover
    );
  }
}
.button-variant-subtle {
  --button-background-color: transparent;
  --button-border-color: transparent;
  --button-color: var(--sds-color-text-brand-default);
  &[data-hovered]:not([data-disabled]) {
    --button-background-color: var(
      --sds-color-background-default-default-hover
    );
  }
}

.button-variant-danger-primary {
  --button-background-color: var(--sds-color-background-danger-default);
  --button-border-color: var(--sds-color-border-danger-secondary);
  --button-color: var(--sds-color-text-danger-on-danger);
  &[data-hovered]:not([data-disabled]) {
    --button-background-color: var(--sds-color-background-danger-hover);
    --button-border-color: var(--sds-color-border-danger-default);
  }
}
.button-variant-danger-subtle {
  --button-background-color: transparent;
  --button-border-color: transparent;
  --button-color: var(--sds-color-text-danger-default);
  &[data-hovered]:not([data-disabled]) {
    --button-background-color: var(
      --sds-color-background-danger-tertiary-hover
    );
  }
}

.button[data-disabled] {
  cursor: default;
  pointer-events: none;
  --button-background-color: var(--sds-color-background-disabled-default);
  --button-border-color: var(--sds-color-border-disabled-default);
  --button-color: var(--sds-color-text-disabled-default);
}

.button-group {
  align-items: center;
  display: flex;
  gap: var(--sds-size-space-300);

  &.button-group-align-start {
    justify-content: flex-start;
  }
  &.button-group-align-center {
    justify-content: center;
  }
  &.button-group-align-end {
    justify-content: flex-end;
  }
  &.button-group-align-justify {
    > .button {
      flex: 1;
    }
  }
  &.button-group-align-stack {
    flex-direction: column;
    > .button {
      width: 100%;
    }
  }
}
