opencode/packages/ui/src/components/list.css

@property --bottom-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@keyframes scroll {
  0% {
    --bottom-fade: 20px;
  }
  90% {
    --bottom-fade: 20px;
  }
  100% {
    --bottom-fade: 0;
  }
}

[data-component="list"] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  /*padding: 0 12px;*/

  [data-slot="list-search-wrapper"] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    margin-bottom: 4px;

    > [data-component="icon-button"] {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      background-color: transparent;
      opacity: 0.5;
      transition: opacity 0.15s ease;

      &:hover:not(:disabled),
      &:focus-visible:not(:disabled),
      &:active:not(:disabled) {
        background-color: transparent;
        opacity: 0.7;
      }

      &:hover:not(:disabled) [data-slot="icon-svg"] {
        color: var(--icon-hover);
      }

      &:active:not(:disabled) [data-slot="icon-svg"] {
        color: var(--icon-active);
      }
    }
  }

  [data-slot="list-search"] {
    display: flex;
    flex: 1;
    padding: 8px;
    align-items: center;
    gap: 12px;

    border-radius: var(--radius-md);
    background: var(--surface-base);

    [data-slot="list-search-container"] {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1 0 0;
      max-height: 20px;

      [data-slot="list-search-input"] {
        width: 100%;

        &[data-slot="input-input"] {
          line-height: 20px;
          max-height: 20px;
        }
      }
    }

    > [data-component="icon-button"] {
      width: 20px;
      height: 20px;
      background-color: transparent;
      opacity: 0.5;
      transition: opacity 0.15s ease;

      &:hover:not(:disabled),
      &:focus-visible:not(:disabled),
      &:active:not(:disabled) {
        background-color: transparent;
        opacity: 0.7;
      }

      &:hover:not(:disabled) [data-slot="icon-svg"] {
        color: var(--icon-hover);
      }

      &:active:not(:disabled) [data-slot="icon-svg"] {
        color: var(--icon-active);
      }
    }

    > [data-component="icon-button"] {
      background-color: transparent;

      &:hover:not(:disabled),
      &:focus:not(:disabled),
      &:active:not(:disabled) {
        background-color: transparent;
      }

      &:hover:not(:disabled) [data-slot="icon-svg"] {
        color: var(--icon-hover);
      }

      &:active:not(:disabled) [data-slot="icon-svg"] {
        color: var(--icon-active);
      }
    }
  }

  [data-slot="list-scroll"] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    mask: linear-gradient(to bottom, #ffff calc(100% - var(--bottom-fade)), #0000);
    animation: scroll;
    animation-timeline: --scroll;
    scroll-timeline: --scroll y;
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      display: none;
    }

    [data-slot="list-empty-state"] {
      display: flex;
      padding: 32px 48px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px;
      align-self: stretch;

      [data-slot="list-message"] {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2px;
        max-width: 100%;
        color: var(--text-weak);
        white-space: nowrap;

        /* text-14-regular */
        font-family: var(--font-family-sans);
        font-size: 14px;
        font-style: normal;
        font-weight: var(--font-weight-regular);
        line-height: var(--line-height-large); /* 142.857% */
        letter-spacing: var(--letter-spacing-normal);
      }

      [data-slot="list-filter"] {
        color: var(--text-strong);
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    [data-slot="list-group"] {
      position: relative;
      display: flex;
      flex-direction: column;

      &:last-child {
        padding-bottom: 12px;
      }

      [data-slot="list-header"] {
        display: flex;
        z-index: 10;
        padding: 8px 12px 8px 8px;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        background: var(--surface-raised-stronger-non-alpha);
        position: sticky;
        top: 0;

        color: var(--text-weak);

        /* text-14-medium */
        font-family: var(--font-family-sans);
        font-size: 14px;
        font-style: normal;
        font-weight: var(--font-weight-medium);
        line-height: var(--line-height-large); /* 142.857% */
        letter-spacing: var(--letter-spacing-normal);

        &::after {
          content: "";
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          height: 16px;
          background: linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha), transparent);
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.15s ease;
        }

        &[data-stuck="true"]::after {
          opacity: 1;
        }
      }

      [data-slot="list-items"] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;

        [data-slot="list-item"] {
          display: flex;
          position: relative;
          width: 100%;
          padding: 6px 8px 6px 8px;
          align-items: center;
          color: var(--text-strong);
          scroll-margin-top: 28px;

          /* text-14-medium */
          font-family: var(--font-family-sans);
          font-size: 14px;
          font-style: normal;
          font-weight: var(--font-weight-medium);
          line-height: var(--line-height-large); /* 142.857% */
          letter-spacing: var(--letter-spacing-normal);

          [data-slot="list-item-selected-icon"] {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            aspect-ratio: 1/1;
            [data-component="icon"] {
              color: var(--icon-strong-base);
            }
          }
          [data-slot="list-item-active-icon"] {
            display: none;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            aspect-ratio: 1/1;
            [data-component="icon"] {
              color: var(--icon-strong-base);
            }
          }

          [data-slot="list-item-extra-icon"] {
            color: var(--icon-base);
            margin-left: -4px;
          }

          [data-slot="list-item-divider"] {
            position: absolute;
            bottom: 0;
            left: var(--list-divider-inset, 16px);
            right: var(--list-divider-inset, 16px);
            height: 1px;
            background: var(--border-weak-base);
            pointer-events: none;
          }

          [data-slot="list-item"]:last-child [data-slot="list-item-divider"] {
            display: none;
          }

          &[data-active="true"] {
            border-radius: var(--radius-md);
            background: var(--surface-raised-base-hover);
            [data-slot="list-item-active-icon"] {
              display: inline-flex;
            }
            [data-slot="list-item-extra-icon"] {
              display: block !important;
              color: var(--icon-strong-base) !important;
            }
          }
          &:active {
            background: var(--surface-raised-base-active);
          }
          &:focus-visible {
            outline: none;
          }
        }

        [data-slot="list-item-add"] {
          display: flex;
          position: relative;
          width: 100%;
          padding: 6px 8px 6px 8px;
          align-items: center;
          color: var(--text-strong);

          /* text-14-medium */
          font-family: var(--font-family-sans);
          font-size: 14px;
          font-style: normal;
          font-weight: var(--font-weight-medium);
          line-height: var(--line-height-large); /* 142.857% */
          letter-spacing: var(--letter-spacing-normal);

          [data-component="input"] {
            width: 100%;
          }
        }
      }
    }
  }
}