.Root {
  display: flex;
  align-items: center;
  gap: var(--theme-spacing-4);
  padding: var(--theme-spacing-2) var(--theme-spacing-4);
  border-bottom: 1px solid var(--theme-color-border-default);
  background-color: var(--theme-color-bg-2);
}

.Column {
  display: flex;
  align-items: center;
  gap: var(--theme-spacing-1);
  padding: var(--theme-spacing-2);
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-radius: var(--theme-border-radius-small);

  &:hover:not(:disabled) {
    background-color: var(--theme-color-bg-3);
  }

  &:disabled {
    cursor: default;
  }

  &[data-active='true'] {
    background-color: var(--theme-color-bg-3);
  }
}
