lila/ui/analyse/css/study/_list.scss

%study-list {
  @extend %box-neat;
  @include prevent-select;

  background: $c-bg-box;

  .study-list > div,
  button {
    @extend %flex-between-nowrap;

    text-align: start;
    align-items: stretch;

    @include transition;

    &:hover,
    &:focus,
    &.active {
      color: $c-font-clear;
      background: $m-primary_bg--mix-10;
    }
  }

  .act {
    @extend %flex-center-center;

    color: $c-font;
    cursor: pointer;
    border-radius: 99px;
    align-self: center;
    font-size: 0.9em;
    opacity: 0.15;
    padding: 0.3em;
    margin-inline-end: 0.5em;

    @include transition;
  }

  .study-list > :hover .act {
    opacity: 0.7;

    &:hover {
      background: $c-primary;
      color: $c-over;
      opacity: 1;
    }
  }

  .add {
    border-top: $border;
    cursor: pointer;
  }
}

%study-list-ongoing {
  ongoing {
    @extend %flex-center-center;

    align-self: center;
    font-size: 0.7em;
    color: $c-bad;
    margin-inline-end: 0.7rem;
  }
}

.study-list {
  @include mq-less-than-col3 {
    min-height: 16em;
    max-height: 16em;
  }

  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
}