/// Sets the background-image and box-shadow for single or multiple given
/// interaction states.
///
/// @param {argList} $interaction-states... - Accepts single or multiple
/// interactions states.
@mixin state($interaction-states...) {
  $backgrounds: ();

  @each $state in $interaction-states {
    $colors: color(state, $state);
    $backgrounds: append(
      $backgrounds,
      linear-gradient($colors, $colors),
      comma
    );

    @if $state == 'focused' {
      box-shadow: inset rem(2px) 0 0 var(--p-focused);
    }

    @if $state == 'focused-destructive' {
      box-shadow: inset rem(2px) 0 0 var(--p-focused);
    }
  }
  background-image: $backgrounds;
}

@mixin list-selected-indicator($offset: spacing(tight)) {
  content: '';
  background-color: var(--p-interactive);
  position: absolute;
  top: 0;
  left: -1 * $offset;
  height: 100%;
  display: block;
  width: border-width(thicker);
  border-top-right-radius: var(--p-border-radius-base);
  border-bottom-right-radius: var(--p-border-radius-base);
}