.list-cell-tags-floating {
  list-style: none;
  display: flex;
  flex-flow: column;
  row-gap: var(--spacing-xs);
  max-height: 250px;
  max-width: 100dvh;
  min-height: 35px;
  overflow: auto;
  padding-right: var(--spacing-xs);
  min-width: 201px;

  li {
    @include typography(app-modal-1);
    color: var(--text-body-secondary);
  }
}

.list-cell-tags {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  width: 100%;

  &:not(.empty) {
    cursor: help;
  }

  span,
  p {
    @include typography(app-modal-2);
  }

  & > .track {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: var(--spacing-xs);
    overflow: visible;

    .tag {
      padding: 3px 6px;
      height: unset;
      border-radius: 6px;
    }
  }

  &.overflows {
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      width: 65px;
      height: 100%;
      content: ' ';
      background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0) 0%,
        var(--surface-default-modal) 100%
      );
    }
  }

  .no-data {
    cursor: default;
  }

  .tag {
    user-select: none;
  }
}
