.root {
  background-color: light-dark(
    var(--mantine-color-gray-0),
    var(--mantine-color-dark-6)
  );
}

.item {
  background-color: light-dark(
    var(--mantine-color-gray-0),
    var(--mantine-color-dark-6)
  );
  border: rem(1px) solid transparent;
  position: relative;
  z-index: 0;
  transition: transform 150ms ease;

  & [data-active] {
    transform: scale(1.03);
    z-index: 1;
    background-color: var(--mantine-color-violet-6);
    color: var(--mantine-color-white);
    border-color: light-dark(
      var(--mantine-color-gray-2),
      var(--mantine-color-dark-4)
    );
    box-shadow: var(--mantine-shadow-md);
    border-radius: var(--mantine-radius-md);
    font-weight: 600;
  }
}

.panel {
  padding: var(--mantine-spacing-sm);
  font-size: var(--mantine-font-size-sm);
}

.chevron {
  &[data-rotate] {
    transform: rotate(-90deg);
  }
}
