@layer seed-components {
  .seed-app-bar__root {
    z-index: var(--z-index-app-bar);
    box-sizing: border-box;
    align-items: flex-end;
    width: 100%;
    display: flex;
    position: absolute;
    top: 0;
  }

  .seed-app-bar__background {
    pointer-events: none;
    z-index: -1;
    position: absolute;
    inset: 0;
  }

  .seed-app-bar__left {
    align-items: center;
    height: 100%;
    display: flex;
  }

  .seed-app-bar__right {
    align-items: center;
    height: 100%;
    margin-left: auto;
    display: flex;
  }

  .seed-app-bar__iconButton {
    border-radius: var(--seed-radius-r1);
    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
    outline: var(--seed-dimension-x0_5) solid transparent;
    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-family: inherit;
    display: flex;
  }

  .seed-app-bar__iconButton:is(:focus-visible, [data-focus-visible]) {
    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
  }

  .seed-app-bar__icon {
    flex-shrink: 0;
    display: inline-block;
  }

  .seed-app-bar__root--theme_cupertino {
    height: calc(44px + var(--seed-safe-area-top));
    padding-left: var(--seed-dimension-x4);
    padding-right: var(--seed-dimension-x4);
    padding-top: var(--seed-safe-area-top);
  }

  .seed-app-bar__iconButton--theme_cupertino {
    width: 44px;
    height: 44px;
  }

  .seed-app-bar__iconButton--theme_cupertino:first-child {
    margin-left: -10px;
  }

  .seed-app-bar__iconButton--theme_cupertino:last-child {
    margin-right: -10px;
  }

  .seed-app-bar__icon--theme_cupertino {
    width: var(--seed-icon-size, 24px);
    height: var(--seed-icon-size, 24px);
  }

  .seed-app-bar__root--theme_android {
    height: calc(56px + var(--seed-safe-area-top));
    padding-left: var(--seed-dimension-x4);
    padding-right: var(--seed-dimension-x4);
    padding-top: var(--seed-safe-area-top);
  }

  .seed-app-bar__iconButton--theme_android {
    width: 44px;
    height: 44px;
  }

  .seed-app-bar__iconButton--theme_android:first-child {
    margin-left: -10px;
  }

  .seed-app-bar__iconButton--theme_android:last-child {
    margin-right: -10px;
  }

  .seed-app-bar__icon--theme_android {
    width: var(--seed-icon-size, 24px);
    height: var(--seed-icon-size, 24px);
  }

  .seed-app-bar__left--theme_android {
    padding-right: 16px;
  }

  .seed-app-bar__background--tone_layer {
    background: var(--seed-box-background, var(--seed-color-bg-layer-default));
  }

  .seed-app-bar__icon--tone_layer {
    color: var(--seed-icon-color, var(--seed-color-fg-neutral));
  }

  .seed-app-bar__root--tone_transparent {
    background-color: #0000;
  }

  .seed-app-bar__icon--tone_transparent {
    color: var(--seed-icon-color, var(--seed-color-palette-static-white));
  }
}