@import '../../../css/colors.css';

.list {
  list-style: none;

  margin: 0;
  padding-left: 0;

  /* ensure list takes up maximum vertical space amount between column header and user list */
  flex-grow: 1;

  min-height: 0;
  overflow-y: hidden;
  &:global(.overflowed) {
    overflow-y: scroll;
    border-bottom: 1px solid #C0C1C2;

    --width: 5px;
    --inverse: -5px;
    box-shadow:
      inset 0 var(--inverse) var(--width) var(--inverse) rgba(0,0,0,.7),
      inset 0 var(--width)   var(--width) var(--inverse) rgba(0,0,0,.7);

    li:last-of-type {
      border-bottom: none;
    }
  }
}

/* hack for scrollability (conditionally applied) in firefox,
   as overflow content in a flex container will not scroll
   without it. It will just continue to get larger.
   Note that this declaration does *not* limit the height due
   to the `flex-grow: 1` declaration above
*/
@-moz-document url-prefix() {
  @media (min-width: 768px) {
    .list {
      height: 1px;
    }
  }
}

@import '../../../css/colors.css';

.list {
  list-style: none;

  margin: 0;
  padding-left: 0;

  /* ensure list takes up maximum vertical space amount between column header and user list */
  flex-grow: 1;

  min-height: 0;

  transition: box-shadow 0ms ease-in;
  overflow-y: hidden;
  &:global(.overflowed) {
    overflow-y: scroll;
    border-bottom: 1px solid #C0C1C2;

    --width: 5px;
    --inverse: -5px;
    box-shadow:
      inset 0 var(--inverse) var(--width) var(--inverse) rgba(0,0,0,.7),
      inset 0 var(--width)   var(--width) var(--inverse) rgba(0,0,0,.7);

    transition: box-shadow 250ms ease-in;
    li:last-of-type {
      border-bottom: none;
    }
  }
}

/* hack for scrollability (conditionally applied) in firefox,
   as overflow content in a flex container will not scroll
   without it. It will just continue to get larger.
   Note that this declaration does *not* limit the height due
   to the `flex-grow: 1` declaration above
*/
@-moz-document url-prefix() {
  @media (min-width: 768px) {
    .list {
      height: 1px;
    }
  }
}

Add transition for box-shadows on overflow: scroll lists
Add transition for box-shadows on overflow: scroll lists

  - this was kind of jarring and awkward when switching between mobile tabs
    - so when we enter a scrollable state, the shadows come in softly, but leave instantly
