:root {
  --flyout-background: var(--color-popover);
  --flyout-trigger-expanded-background: var(--color-selected);
  --flyout-trigger-expanded-hover-background: var(--color-selected-hover);
  --flyout-shadow-color: var(--color-shadow-anchored);
  --flyout-border: var(--control-border-width) solid var(--color-border);
  --flyout-shadow: 0 var(--space-1) var(--space-2) var(--flyout-shadow-color);
  --flyout-radius: var(--radius-14);
  --flyout-padding: var(--space-4);
  --flyout-gap: var(--space-3);
  --flyout-anchor-gap: var(--space-2);
  --flyout-width: var(--size-380);
  --flyout-compact-width: var(--size-350);
  --flyout-viewport-width: calc(100vw - var(--space-4));
  --flyout-viewport-height: calc(100dvh - var(--space-4));
  --flyout-font: var(--font-type-body);
  --flyout-title-font: var(--font-type-heading-small);
  --flyout-description-font: var(--font-type-caption);
  --flyout-focus-outline: var(--focus-width) solid var(--color-focus-ring);
}

.flyout__panel--compact {
  --flyout-width: var(--flyout-compact-width);
}

.flyout {
  display: inline-block;
  max-inline-size: 100%;
}

.flyout__trigger[aria-expanded="true"] {
  --button-background: var(--flyout-trigger-expanded-background);
  --button-hover-background: var(--flyout-trigger-expanded-hover-background);
  --button-pressed-background: var(--flyout-trigger-expanded-hover-background);
}

.flyout__panel {
  box-sizing: border-box;
  position: fixed;
  inset: auto;
  margin: 0;
  inline-size: var(--flyout-width);
  max-inline-size: var(--flyout-viewport-width);
  max-block-size: var(--flyout-viewport-height);
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--flyout-padding);
  border: var(--flyout-border);
  border-radius: var(--flyout-radius);
  background: var(--flyout-background);
  color: var(--color-popover-foreground);
  box-shadow: var(--flyout-shadow);
  font: var(--flyout-font);
  overflow-wrap: anywhere;
}

.flyout__panel:popover-open {
  display: flex;
  flex-direction: column;
  gap: var(--flyout-gap);
}

.flyout__panel:focus-visible {
  outline: var(--flyout-focus-outline);
  outline-offset: var(--focus-offset);
}

.flyout__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--flyout-gap);
}

.flyout__title {
  min-inline-size: 0;
  margin: 0;
  font: var(--flyout-title-font);
}

.flyout__description {
  margin: 0;
  color: var(--color-muted-foreground);
  font: var(--flyout-description-font);
}

.flyout__body {
  min-inline-size: 0;
}