@layer env.components {
  .env-loading-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: calc(var(--env-z-tooltip) + 1);
    --env-loading-bar-height: 0.1875rem;
    block-size: var(--env-loading-bar-height);
    overflow: hidden;
    pointer-events: none;
  }
  .env-loading-bar-contained {
    position: absolute;
    z-index: var(--env-z-raised);
  }
  .env-loading-bar-indicator {
    block-size: 100%;
    background: var(--env-color-bg-primary-emphasis);
    transform-origin: left center;
    transform: scaleX(0.9);
    transition: transform calc(var(--env-motion-duration-slow) * 40) var(--env-motion-ease-enter);
  }
  .env-loading-bar-indicator:dir(rtl) {
    transform-origin: right center;
  }
  @starting-style {
    .env-loading-bar-indicator {
      transform: scaleX(0);
    }
  }
  .env-loading-bar[data-state='finishing'] .env-loading-bar-indicator {
    transform: scaleX(1);
    opacity: 0;
    transition:
      transform var(--env-motion-duration-slow) var(--env-motion-ease-enter),
      opacity var(--env-motion-duration-fast) var(--env-motion-ease-exit)
        var(--env-motion-duration-slow);
  }
  @media (prefers-reduced-motion: reduce) {
    .env-loading-bar-indicator {
      transform: none;
      transition: opacity var(--env-motion-duration-medium) var(--env-motion-ease-enter);
    }
    .env-loading-bar[data-state='finishing'] .env-loading-bar-indicator {
      transform: none;
      transition: opacity var(--env-motion-duration-fast) var(--env-motion-ease-exit);
    }
    @starting-style {
      .env-loading-bar-indicator {
        transform: none;
        opacity: 0;
      }
    }
  }
}
@layer env.components {
  .env-top-bar {
    box-sizing: border-box;
    position: relative;
    flex-wrap: nowrap;
    min-block-size: var(--env-top-bar-height);
    min-inline-size: 0;
    padding-inline: var(--env-space-4);
    background: var(--env-surface-color, var(--env-color-bg-default));
    color: var(--env-color-fg-default);
    white-space: nowrap;
  }
  .env-top-bar[data-background='page'] {
    background: var(--env-surface-color, var(--env-color-bg-page));
  }
  .env-top-bar-start,
  .env-top-bar-actions {
    flex: 0 0 auto;
  }
  .env-top-bar-start {
    --env-icon-size: var(--env-picture-size-sm);
  }
  .env-top-bar-start > :is(img, svg:not([width='1em'])) {
    inline-size: var(--env-icon-size);
    block-size: var(--env-icon-size);
    object-fit: contain;
  }
  .env-top-bar-title {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    font: var(--env-type-body);
    font-weight: var(--env-font-weight-semibold);
    text-overflow: ellipsis;
  }
  .env-top-bar[data-sticky] {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--env-z-sticky);
  }
  .env-top-bar-loading-bar {
    inset-block: auto 0;
  }
  .env-top-bar[data-title-bar] {
    --env-control-height: var(--env-control-height-sm);
    --env-top-bar-title-bar-start: var(--env-space-3);
    --env-top-bar-title-bar-end: var(--env-space-3);
    --env-top-bar-title-bar-left: var(--env-top-bar-title-bar-start);
    --env-top-bar-title-bar-right: var(--env-top-bar-title-bar-end);
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
    column-gap: var(--env-space-3);
    min-block-size: 0;
    block-size: max(env(titlebar-area-height, 0px), var(--env-title-bar-height));
    padding-left: calc(env(titlebar-area-x, 0px) + var(--env-top-bar-title-bar-left));
    padding-right: calc(
      100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) +
        var(--env-top-bar-title-bar-right)
    );
    font: var(--env-type-body-sm);
    -webkit-app-region: drag;
    app-region: drag;
    -webkit-user-select: none;
    user-select: none;
  }
  .env-top-bar[data-title-bar]:dir(rtl) {
    --env-top-bar-title-bar-left: var(--env-top-bar-title-bar-end);
    --env-top-bar-title-bar-right: var(--env-top-bar-title-bar-start);
  }
  .env-top-bar[data-title-bar] > .env-top-bar-start,
  .env-top-bar[data-title-bar] > .env-skeleton-content > .env-top-bar-start {
    grid-column: 1;
  }
  .env-top-bar[data-title-bar] > .env-top-bar-title,
  .env-top-bar[data-title-bar] > .env-skeleton-content > .env-top-bar-title {
    grid-column: 2;
    font: inherit;
    text-align: center;
  }
  .env-top-bar[data-title-bar] > .env-top-bar-actions,
  .env-top-bar[data-title-bar] > .env-skeleton-content > .env-top-bar-actions {
    grid-column: 3;
    justify-content: end;
  }
  .env-top-bar[data-title-bar]
    :is(
      a,
      button,
      input,
      select,
      textarea,
      label,
      summary,
      iframe,
      [role='button'],
      [role='link'],
      [role='menubar'],
      [role='menuitem'],
      [role='combobox'],
      [role='tablist'],
      [role='tab'],
      [role='switch'],
      [role='checkbox'],
      [role='radio'],
      [role='slider'],
      [role='textbox'],
      [role='searchbox'],
      [tabindex],
      [contenteditable],
      :has(> input, > textarea)
    ) {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }
  .env-top-bar[data-title-bar] :is(input, textarea, [contenteditable]) {
    -webkit-user-select: text;
    user-select: text;
  }
  @media (forced-colors: active) {
    .env-top-bar {
      border-block-end: var(--env-control-border-width) solid CanvasText;
    }
  }
  [data-env-skeleton] .env-top-bar-title {
    --env-skeleton-placeholder: inline-block;
    --env-skeleton-length: 10rem;
  }
}