:host {
  --accent-color: var(--bp-status-accent-background-200);
  accent-color: var(--accent-color);
  box-sizing: border-box;
  display: block;
  contain: layout;
}

:host([popover]) {
  display: revert;
  contain: revert;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

:host(:state(disabled)),
:host([disabled]) {
  pointer-events: none !important;
}

::slotted([sr-only]),
[sr-only] {
  position: absolute !important;
  /* stylelint-disable-next-line property-no-deprecated */
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  top: 0;
  left: 0;
  display: block !important;
}

/* https://developers.google.com/web/fundamentals/web-components/best-practices */
:host([hidden]),
[hidden] {
  display: none !important;
}

/* https://coryrylan.com/blog/dont-override-css-outline-focus-styles */
:host([tabindex='0']:focus) [focusable], /* key focus */
:host([tabindex='0']:focus):not(:focus-visible), /* button/press focus */
:host(:focus-within) [focusable], /* complex nested focus (grid cell) */
[tabindex='0'][focusable]:focus:not(:focus-visible) {
  outline: var(--bp-interaction-outline); /* stylelint-disable-line declaration-block-no-duplicate-properties */
  outline: var(--bp-interaction-outline-webkit); /* stylelint-disable-line declaration-block-no-duplicate-properties */
  outline-offset: var(--bp-interaction-outline-offset);
}

dialog {
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
}

@container style(--bp-layer: 200) {
  :state(bp-layer) {
    --background: var(--bp-layer-background-200);
    --bp-layer: 300;
  }
}

@container style(--bp-layer: 300) {
  :state(bp-layer) {
    --background: var(--bp-layer-background-300);
    --bp-layer: 200;
  }
}
