.entry.component {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid hsl(from var(--color-border) h s l / 0%);
  border-radius: 2px;
  background-color: var(--color-surface);
  user-select: none;

  &:hover {
    background-color: hsl(from var(--color-surface) h s calc(l + 1));
    border-bottom: 1px solid var(--color-border);
  }

  .icon {
    width: 1.33em;
    height: 1.33em;
  }

  .name {
    flex: 1;
    animation: fadeIn 0.5s ease;
  }

  .view {
    .contents {
      display: inline-block;
      rotate: 145deg;
    }
  }
}