.list {
  position: relative;
  width: fit-content;
  background-color: light-dark(#f3f4f6, var(--mantine-color-dark-5));
  padding: rem(3);
  border-radius: var(--mantine-radius-md);
  gap: rem(6);
}

.indicator {
  background-color: var(--mantine-color-white);
  border-radius: var(--mantine-radius-md);
  border: 1px solid var(--mantine-color-gray-2);

  @mixin dark {
    background-color: var(--mantine-color-dark-6);
    border-color: var(--mantine-color-dark-4);
  }
}

.tab {
  z-index: 1;
  font-weight: 500;
  transition: color 100ms ease;
  color: var(--mantine-color-gray-7);
  letter-spacing: rem(-0.4);
  padding: rem(8) rem(16);
  font-size: rem(12);

  &[data-active] {
    color: var(--mantine-color-black);
  }

  @mixin dark {
    color: var(--mantine-color-dark-1);

    &[data-active] {
      color: var(--mantine-color-white);
    }
  }
}

.chartWrapper {
  border: rem(1.4) solid
    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
  border-radius: var(--mantine-radius-md);
}

.chartLabel {
  font-size: rem(12);
  font-weight: 500;
  letter-spacing: rem(-0.4);
  color: light-dark(var(--mantine-color-dark-3), var(--mantine-color-dark-1));
}
