---

[data-theme='mxt'],
[data-theme='mb'][data-mode='light'] {
  --btn-bg-hover: var(--neutral-4);
  --btn-text-hover: var(--neutral-13);

  --btn-bg-pressed: var(--neutral-5);
  --btn-text-pressed: var(--neutral-13);

  --btn-bg-selected: var(--neutral-12);
  --btn-text-selected: var(--neutral-2);

  --btn-svg-color: var(--neutral-2);

  --tooltip-bg: var(--neutral-13);
  --tooltip-text: var(--neutral-1);
}

[data-theme='tr'],
[data-theme='mb'][data-mode='dark'] {
  --btn-bg-hover: var(--neutral-4);
  --btn-text-hover: var(--neutral-13);

  --btn-bg-pressed: var(--neutral-5);
  --btn-text-pressed: var(--neutral-13);

  --btn-bg-selected: var(--neutral-5);
  --btn-text-selected: var(--neutral-13);

  --btn-svg-color: var(--neutral-12);

  --tooltip-bg: var(--neutral-6);
  --tooltip-text: var(--neutral-13);
}

@mixin buttonBase {
  min-width: var(--space-2000);
  display: flex;
  justify-content: start;
  align-items: center;
  gap: var(--space-0250);
  color: var(--neutral-12);
  padding: var(--space-0500);
  border-radius: var(--space-0250);
  font-size: var(--space-0750);
  cursor: pointer;

  p {
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: var(--space-0750);
    gap: var(--space-0500);
    padding: 0;

    svg {
      width: var(--space-1000);
      height: var(--space-1000);
    }
  }

  &:hover:not(:disabled):not(.selected):not(.pressed),
  &:active:not(:disabled):not(.selected):not(.pressed) {
    background-color: var(--btn-bg-hover);
    color: var(--btn-text-hover);
  }

  &.pressed {
    background-color: var(--btn-bg-pressed);
    color: var(--btn-text-pressed);
  }

  &.selected {
    background-color: var(--btn-bg-selected);
    color: var(--btn-text-selected);
  }

  &:disabled {
    background-color: transparent;
    color: var(--neutral-9);
    cursor: not-allowed;
  }
}

@mixin tooltipHint {
  background-color: var(--tooltip-bg) !important;
  color: var(--tooltip-text) !important;
  font-size: var(--space-0750);

  div {
    border-right-color: var(--tooltip-bg) !important;
  }
}

@mixin scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-6) transparent;

  &::-webkit-scrollbar {
    width: var(--space-0250);
    height: var(--space-0250);
  }

  &::-webkit-scrollbar-button {
    display: none;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: var(--space-0250);
  }

  &::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: var(--space-0250);
  }

  &::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-6);
  }
}