@mixin color {
  $root: &;

  position: relative;
  outline: 0;
  transition: all var(--purpur-motion-duration-100) ease;

  &:focus {
    &::before {
      box-shadow: 0 0 0 var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus);
      content: "";
      display: block;
      inset: calc(var(--purpur-spacing-25) * -1);
      position: absolute;
    }

    &:not(:focus-visible) {
      &::before {
        box-shadow: none;
      }
    }
  }

  &--primary {
    background-color: var(--purpur-color-background-interactive-primary);
    color: var(--purpur-color-text-interactive-on-primary);

    &:hover:not(#{$root}--disabled) {
      background-color: var(--purpur-color-background-interactive-primary-hover);
    }

    &:active:not(#{$root}--disabled) {
      background-color: var(--purpur-color-background-interactive-primary-active);
    }
  }

  &--primary-negative {
    background-color: var(--purpur-color-background-interactive-primary-negative);
    color: var(--purpur-color-text-interactive-on-primary-negative);

    &:hover:not(#{$root}--disabled) {
      background-color: var(--purpur-color-background-interactive-primary-hover-negative);
      border-color: var(--purpur-color-background-interactive-primary-hover-negative);
    }

    &:active:not(#{$root}--disabled) {
      background-color: var(--purpur-color-background-interactive-primary-active-negative);
      border-color: var(--purpur-color-background-interactive-primary-active-negative);
    }
  }

  &--secondary {
    background-color: transparent;
    box-shadow: inset 0 0 0 var(--purpur-border-width-xs)
      var(--purpur-color-border-interactive-primary);
    color: var(--purpur-color-text-interactive-primary);

    &:hover:not(#{$root}--disabled) {
      background-color: var(--purpur-color-background-interactive-transparent-hover);
    }

    &:active:not(#{$root}--disabled) {
      background-color: var(--purpur-color-background-interactive-transparent-active);
    }
  }

  &--secondary-negative {
    background-color: transparent;
    box-shadow: inset 0 0 0 var(--purpur-border-width-xs)
      var(--purpur-color-border-interactive-primary-negative);
    color: var(--purpur-color-text-interactive-primary-negative);

    &:hover:not(#{$root}--disabled) {
      background-color: var(--purpur-color-background-interactive-transparent-hover-negative);
    }

    &:active:not(#{$root}--disabled) {
      background-color: var(--purpur-color-background-interactive-transparent-active-negative);
    }
  }

  &--expressive {
    background-color: var(--purpur-color-background-interactive-expressive);
    color: var(--purpur-color-text-interactive-on-expressive);

    &:hover:not(#{$root}--disabled) {
      background-color: var(--purpur-color-background-interactive-expressive-hover);
    }

    &:active:not(#{$root}--disabled) {
      background-color: var(--purpur-color-background-interactive-expressive-active);
    }
  }

  &--expressive-negative {
    background-color: var(--purpur-color-background-interactive-expressive-negative);
    color: var(--purpur-color-text-interactive-on-expressive-negative);

    &:hover:not(#{$root}--disabled) {
      background-color: var(--purpur-color-background-interactive-expressive-hover-negative);
      color: var(--purpur-color-text-interactive-on-expressive-hover-negative);
    }

    &:active:not(#{$root}--disabled) {
      background-color: var(--purpur-color-background-interactive-expressive-active-negative);
      color: var(--purpur-color-text-interactive-on-expressive-active-negative);
    }
  }
}

@mixin action {
  $root: &;

  align-items: center;
  border-radius: var(--purpur-border-radius-full);
  border-width: 0;
  cursor: pointer;
  display: inline-flex;
  font-size: var(--purpur-typography-scale-100);
  font-family: var(--purpur-typography-family-default);
  font-weight: var(--purpur-typography-weight-medium);
  gap: var(--purpur-spacing-100);
  justify-content: center;
  line-height: var(--purpur-spacing-300);
  text-decoration: none;
  width: auto;

  &:focus::before {
    border-radius: var(--purpur-border-radius-full);
  }

  svg {
    display: block;
  }

  &--xs {
    padding: var(--purpur-spacing-50) var(--purpur-spacing-250);

    &#{$root}--icon-only {
      padding: var(--purpur-spacing-100);
    }
  }

  &--sm {
    padding: var(--purpur-spacing-100) var(--purpur-spacing-250);

    &#{$root}--icon-only {
      padding: var(--purpur-spacing-100);
    }
  }

  &--md {
    padding: var(--purpur-spacing-150) var(--purpur-spacing-300);

    &#{$root}--icon-only {
      padding: var(--purpur-spacing-150);
    }
  }

  &--lg {
    padding: var(--purpur-spacing-200) var(--purpur-spacing-400);

    &#{$root}--icon-only {
      padding: var(--purpur-spacing-200);
    }
  }

  &--full-width {
    width: 100%;
  }

  @include color();
}
