.gl-legend-inline {
  @include gl-display-flex;
  @include gl-flex-wrap;
  @include gl-flex-shrink-0;
  @include gl-text-gray-900;

  .gl-legend-inline-series {
    @include gl-display-flex;
    @include gl-flex-shrink-0;
    @include gl-justify-content-space-between;
    @include gl-align-items-center;
    @include gl-pr-5;

    &:hover {
      @include gl-cursor-pointer;
      @include gl-text-decoration-underline;
    }

    .gl-legend-inline-series-label {
      @include gl-mr-3;
    }
  }
}

.gl-legend-tabular {
  @include gl-relative;

  &::after {
    background-image: linear-gradient(to bottom, $transparent-rgba, $white);
    @include gl-bottom-0;
    @include gl-content-empty;
    @include gl-display-block;
    @include gl-h-4;
    @include gl-absolute;
    @include gl-w-full;
  }

  .gl-legend-tabular-header {
    @include gl-display-flex;
    @include gl-justify-content-end;
  }

  .gl-legend-tabular-header-cell,
  .gl-legend-tabular-details-cell {
    @include gl-white-space-nowrap;
    @include gl-overflow-hidden;
    @include gl-text-overflow-ellipsis;
    @include gl-text-right;
    @include gl-w-eighth;
  }

  .gl-legend-tabular-header-cell {
    @include gl-font-weight-bold;
    @include gl-line-height-24;
    @include gl-px-3;
  }

  .gl-legend-tabular-body {
    // shorter height by half a line, so table body is cut off,
    // suggesting there's more to scroll
    height: $gl-spacing-scale-13 - $gl-spacing-scale-4;
    @include gl-overflow-y-auto;

    > *:nth-child(odd) {
      @include gl-bg-gray-10;
    }
  }

  .gl-legend-tabular-row {
    @include gl-display-flex;
  }

  .gl-legend-tabular-title-cell,
  .gl-legend-tabular-details-cell {
    @include gl-line-height-24;
    @include gl-px-3;
  }

  .gl-legend-tabular-title-cell {
    @include gl-overflow-hidden;
    @include gl-w-half;
  }
}