@import "../colors.css";

.button {
  text-transform: none;
  text-align: left;
  font-family: 'Museo';
}

.button + .button {
  margin-left: 10px;
}

.toggle + .toggle {
  margin-left: 10px;
}

.neutral:not([disabled]), .neutral:not([disabled]).raised, .neutral:not([disabled]) {
  color: var(--color-text-primary);
}

.raised > span:not([data-react-toolbox="tooltip"]),
.flat > span:not([data-react-toolbox="tooltip"]),
.floating > span:not([data-react-toolbox="tooltip"]),
.toggle > span:not([data-react-toolbox="tooltip"]) {
  line-height: inherit;
}

.neutral:not([disabled]):focus:not(:active), .neutral:not([disabled]):focus:not(:active) {
  background: var(--color-primary-light-hover);
}

.neutral:not([disabled]):hover, .neutral:not([disabled]):hover {
  background: var(--color-primary-light-hover);
}

.ripple {
  background: var(--color-primary);
}

.neutral:not([disabled]).raised:hover {
  background: var(--color-primary-light-hover);
}

.raised .ripple {
  background: var(--color-primary);
}

.primary:not([disabled]):hover, .primary:not([disabled]).raised:hover {
  background: var(--color-primary-hover);
}

.primary, .primary:not([disabled]).raised, .primary:not([disabled]).floating {
  background: var(--color-primary);
}

.primary .ripple {
  background: var(--ripple-light);
}

.primary:not([disabled]), .primary:not([disabled]).raised, .primary:not([disabled]).toggle {
  color: var(--color-text-primary-on-primary);
}

.accent:not([disabled]):hover, .accent:not([disabled]).raised:hover {
  background: var(--color-secondary-hover);
}

.accent, .accent:not([disabled]).raised, .accent:not([disabled]).floating {
  background: var(--color-secondary);
}

.accent .ripple {
  background: var(--ripple-light);
}

.accent:not([disabled]), .accent:not([disabled]).raised, .accent:not([disabled]).toggle {
  color: var(--color-text-secondary-on-secondary);
}

.menuButton:hover {
  background: none !important;
}

.menuButton .icon {
  font-size: 24px;
}