@layer seed-components {
  .seed-side-navigation-menu-item__root {
    text-align: left;
    background: none;
    border: none;
    border-radius: 10px;
    outline: none;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 44px;
    padding-left: 8px;
    padding-right: 8px;
    scroll-margin-top: 8px;
    scroll-margin-bottom: 24px;
    transition: padding .2s, background-color .2s;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .seed-side-navigation-menu-item__root:before {
    content: "";
    outline: var(--seed-dimension-x0_5) solid transparent;
    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
    transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
    border-radius: 10px;
    position: absolute;
    inset: 0;
  }

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

  .seed-side-navigation-menu-item__root[data-side-navigation-state="collapsed"]:before {
    right: unset;
    width: 40px;
  }

  .seed-side-navigation-menu-item__root:is(:disabled, [disabled], [data-disabled]) {
    cursor: not-allowed;
  }

  .seed-side-navigation-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])) {
    cursor: pointer;
  }

  @media (hover: hover) and (pointer: fine) {
    .seed-side-navigation-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):not([data-current]):is(:hover, [data-hover]):before {
      background-color: var(--seed-color-bg-transparent-pressed);
    }
  }

  @media not all and (hover: hover) and (pointer: fine) {
    .seed-side-navigation-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):not([data-current]):is(:active, [data-active]):before {
      background-color: var(--seed-color-bg-transparent-pressed);
    }
  }

  .seed-side-navigation-menu-item__root[data-current] {
    background-color: var(--seed-color-bg-transparent-selected);
  }

  @media (hover: hover) and (pointer: fine) {
    .seed-side-navigation-menu-item__root[data-current]:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
      background-color: var(--seed-color-bg-transparent-selected-pressed);
    }
  }

  @media not all and (hover: hover) and (pointer: fine) {
    .seed-side-navigation-menu-item__root[data-current]:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
      background-color: var(--seed-color-bg-transparent-selected-pressed);
    }
  }

  .seed-side-navigation-menu-item__root[data-side-navigation-state="collapsed"] {
    padding-left: 10px;
    padding-right: 10px;
  }

  .seed-side-navigation-menu-item__prefixIcon {
    width: 20px;
    height: 20px;
    color: var(--seed-color-palette-gray-600);
    flex-shrink: 0;
    transition: color .2s;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .seed-side-navigation-menu-item__prefixIcon[data-current] {
    color: var(--seed-color-fg-neutral);
  }

  .seed-side-navigation-menu-item__prefixIcon:is(:disabled, [disabled], [data-disabled]) {
    color: var(--seed-color-fg-disabled);
  }

  .seed-side-navigation-menu-item__label {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: var(--seed-color-fg-neutral-muted);
    font-size: var(--seed-font-size-t4);
    line-height: var(--seed-line-height-t4);
    font-weight: var(--seed-font-weight-medium);
    flex-grow: 1;
    padding: 6px 6px 6px 32px;
    transition: opacity .2s, color .2s;
    overflow: hidden;
  }

  .seed-side-navigation-menu-item__label[data-side-navigation-state="collapsed"] {
    opacity: 0;
  }

  .seed-side-navigation-menu-item__label[data-current] {
    color: var(--seed-color-fg-neutral);
  }

  .seed-side-navigation-menu-item__label:is(:disabled, [disabled], [data-disabled]) {
    color: var(--seed-color-fg-disabled);
  }

  .seed-side-navigation-menu-item__suffixIcon {
    width: 16px;
    height: 16px;
    color: var(--seed-color-fg-neutral-subtle);
    flex-shrink: 0;
    transition: transform .2s, opacity .2s;
  }

  .seed-side-navigation-menu-item__suffixIcon:not(:is([data-state="open"], [data-open])) {
    transform: rotate(180deg);
  }

  .seed-side-navigation-menu-item__suffixIcon[data-side-navigation-state="collapsed"] {
    opacity: 0;
  }

  .seed-side-navigation-menu-item__panel[data-collapsible] {
    opacity: 0;
    height: 0;
    transition: height .2s, opacity .2s;
    overflow: hidden;
  }

  .seed-side-navigation-menu-item__panel[data-collapsible]:is([data-state="open"], [data-open]) {
    height: var(--collapsible-content-height);
    opacity: 1;
    transition: height .2s, opacity .2s;
  }
}