@mixin componentSize() {
  &.as-large {
    height: 0.8em;
  }

  &.as-medium {
    height: 1em;
  }

  &.as-small {
    height: 2em;
  }
}

@mixin componentStyle() {
  &.as-primary {
    background-color: transparent;
    border-color: var(--as-primary);
    color: var(--as-primary);

    @include componentMouseOverStyles(
      $hoverBorder: var(--as-primary-hover),
      $activeBoxShadow: var(--as-primary-shadow-1),
      $focusBorder: var(--as-focus),
      $hoverBoxShadow: var(--as-primary-shadow-1)
    );

    &-solid {
      background-color: var(--as-primary);
      border-color: transparent;
      color: var(--as-primary-text);

      @include componentMouseOverStyles(
        $hoverBg: var(--as-primary-hover),
        $hoverBoxShadow: var(--as-primary-shadow-1),
        $focusBg: var(--as-primary-hover),
        $focusBorder: var(--as-focus),
        $activeBoxShadow: var(--as-primary-shadow-1)
      );
    }
  }

  &.as-secondary {
    background-color: var(--as-surface-level-1);
    border-color: var(--as-secondary);
    color: var(--as-secondary);

    @include componentMouseOverStyles(
      $hoverBorder: var(--as-secondary-hover),
      $activeBoxShadow: var(--as-secondary-shadow-1),
      $hoverColor: var(--as-secondary-hover),
      $focusBorder: var(--as-focus),
      $hoverBoxShadow: var(--as-secondary-shadow-1)
    );

    &-solid {
      background-color: var(--as-secondary);
      border-color: transparent;
      color: var(--as-secondary-text);

      @include componentMouseOverStyles(
        $hoverBg: var(--as-secondary-hover),
        $activeBoxShadow: var(--as-secondary-shadow-1),
        $focusBorder: var(--as-focus),
        $hoverBoxShadow: var(--as-secondary-shadow-1)
      );
    }
  }
}

@mixin componentMouseOverStyles(
  $focusBorder,
  $hoverBg: '',
  $hoverBorder: '',
  $hoverColor: '',
  $focusBg: '',
  $focusColor: '',
  $activeBoxShadow: '',
  $hoverBoxShadow: ''
) {
  outline: 0;

  &:hover {
    @if $hoverBg {
      background-color: $hoverBg;
    }
    @if $hoverBorder {
      border-color: $hoverBorder;
    }
    @if $hoverColor {
      color: $hoverColor;
    }
    @if $hoverBoxShadow {
      box-shadow: #{$activeBoxShadow};
    }
  }

  &:focus-visible {
    @if $focusBg {
      background-color: $focusBg;
    }
    @if $focusBorder {
      border-color: $focusBorder;
    }
    @if $focusColor {
      color: $focusColor;
    }
  }

  &:active {
    @if $activeBoxShadow {
      box-shadow: #{$activeBoxShadow};
    }
  }
}