:host {
  --cursor: pointer;
  --user-select: none;
  --pointer-events: initial;
  pointer-events: var(--pointer-events) !important;
}

[interaction] {
  background: color-mix(in oklab, var(--background), currentcolor var(--bp-interaction-offset, 0%));
  user-select: var(--user-select);
  pointer-events: var(--pointer-events) !important;
  cursor: var(--cursor) !important;
}

[interaction-after]::after {
  background: color-mix(in oklab, var(--background), currentcolor var(--bp-interaction-offset, 0%));
  user-select: var(--user-select);
  pointer-events: var(--pointer-events) !important;
  cursor: var(--cursor) !important;
}

:host([pressed]),
:host([expanded]),
:host([selected]),
:host(:state(pressed)),
:host(:state(expanded)),
:host(:state(selected)) {
  --bp-interaction-offset: var(--bp-interaction-selected-offset);
}

:host(:hover),
:host(:state(hover)) {
  --bp-interaction-offset: var(--bp-interaction-hover-offset);
}

:host(:active),
:host(:state(active)) {
  --bp-interaction-offset: var(--bp-interaction-active-offset);
}

:host([disabled]),
:host(:state(disabled)) {
  --bp-interaction-offset: var(--bp-interaction-disabled-offset);
  --cursor: default;
  --pointer-events: none;
}

:host([readonly]),
:host(:state(readonly):not(:state(anchor))) {
  --bp-interaction-offset: 0;
  --cursor: default;
  --pointer-events: none;
}
