@use '../variables' as *;

$legend-symbol-size: $lume-spacing-8 !default;

.lume-chart-legend {
  display: flex;
  justify-items: end;

  &__item {
    display: flex;
    align-items: center;

    padding: 0.25rem 0.5rem;
    gap: 0.5rem;

    color: $lume-color-neutral-100;

    cursor: default;
  }

  &__symbol {
    display: inline-block;
    width: $legend-symbol-size;
    height: $legend-symbol-size;

    border-radius: 50%;
  }
}