opencode/packages/ui/src/components/message-nav.css

@property --reveal-ready {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

[data-component="message-nav"] {
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  height: 100%;
  max-height: calc(100vh - 6rem);
}

[data-slot="message-nav-list"] {
  --message-nav-item-height: 11px;
  --message-nav-item-width: 40px;
  --message-nav-expanded-width: 260px;

  list-style: none;
  padding: 4px;
  width: var(--message-nav-item-width);
  box-sizing: border-box;
  display: grid;
  grid-gap: 4px;
  grid-template-rows: repeat(var(--message-nav-items), var(--message-nav-item-height));
  border-radius: var(--radius-md);
  transition-property: background-color, box-shadow, width, grid-template-rows, padding;
  transition-duration: 150ms;
  transition-delay: 100ms, 100ms, 0ms, 0ms, 0ms, 0ms;
  transition-timing-function: cubic-bezier(0.25, 0, 0.5, 1);

  &:hover {
    --message-nav-line-opacity: 0;
    --message-nav-item-height: 23px;
    --message-nav-item-width: var(--message-nav-expanded-width);
    --message-nav-diff-opacity: 1;
    --message-nav-diff-delay: 300ms;
    --message-nav-title-mask: 0%;
    --message-nav-title-transition-duration: 300ms;
    --message-nav-title-transition-delay: 100ms;

    transition-duration: 200ms, 200ms, 200ms, 300ms, 300ms, 200ms;
    background-color: var(--surface-raised-stronger-non-alpha);
    box-shadow:
      0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)),
      0 1px 2px -1px rgba(19, 16, 16, 0.04),
      0 1px 2px 0 rgba(19, 16, 16, 0.06),
      0 1px 3px 0 rgba(19, 16, 16, 0.08);
  }
}

[data-slot="message-nav-item-button"] {
  --line-width: var(--message-nav-line-width);
  --line-expanded-width: calc(var(--message-nav-expanded-width) - 16px);

  appearance: none;
  border: none;
  background: none;
  padding: 0 4px;
  margin: 0;
  cursor: pointer;
  position: relative;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  box-sizing: border-box;
  width: calc(var(--message-nav-item-width) - 8px);
  height: 100%;
  border-radius: var(--radius-xs);
  transition: background-color 0.15s ease;

  &::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 3px;
    position: absolute;
    pointer-events: none;
    left: 4px;
    top: 50%;
    opacity: var(--message-nav-line-opacity, 1);
    transform: scaleX(var(--message-nav-line-scale, 0.66)) scaleY(.66) translateY(-50%);
    transform-origin: 0% 50%;
    background-color: var(--icon-weak-base);
    transition-property: opacity, background-color, transform;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.32, 0, 0.15, 1);
  }

  &:hover {
    background-color: var(--surface-base-hover);
  }

  &[data-active="true"] {
    --message-nav-line-scale: 1;

    &::before {
      background-color: var(--icon-strong-base);
    }

    [data-slot="message-nav-item-title-inner"] {
      color: var(--text-strong);
    }
  }
}

[data-slot="message-nav-item-title"] {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  transition: mask-position 200ms cubic-bezier(0.25, 0, 0.5, 1);
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

[data-slot="message-nav-item-title-inner"] {
  font-size: 12px;
  line-height: 23px;
  padding-left: 4px;
  color: var(--text-base);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  mask-image: linear-gradient(to right, black, black 30%, transparent 60%, transparent);
  mask-size: 300% 100%;
  mask-position: var(--message-nav-title-mask, 100%) 0%;
  transition: mask-position var(--message-nav-title-transition-duration, 200ms) cubic-bezier(0.25, 0, 0.5, 1) var(--message-nav-title-transition-delay, 0ms);
}

[data-slot="message-nav-item-diff-changes"] {
  font-family: var(--font-family-mono);
  font-feature-settings: var(--font-family-mono--font-feature-settings);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  margin-left: auto;
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: var(--message-nav-diff-opacity, 0);
  transition: opacity 200ms cubic-bezier(0.25, 0, 0.5, 1);
  transition-delay: var(--message-nav-diff-delay, 0ms);
}

[data-slot="message-nav-item-additions"] {
  color: var(--text-diff-add-base);
  display: inline-block;
  vertical-align: top;

  &::before {
    content: "+";
    font: inherit;
    display: inline-block;
  }
}

[data-slot="message-nav-item-deletions"] {
  color: var(--text-diff-delete-base);
  display: inline-block;
  vertical-align: top;

  &::before {
    content: "-";
    display: inline-block;
    font: inherit;
  }
}