.select:hover,
.dropitem:hover {
    background-color: var(--surface-3) !important;
} 
.select:active,
.dropitem:active {
	background-color: var(--buttonhover) !important;
}
.hint-button:active,
.cancel-button:active,
.new-main:active,
.new-side:active,
.new-main2:active,
.number-button:active,
.menu-item:active,
.theme-toggle:active,
.history-button:active:not(:disabled) {
  background: color-mix(
    in srgb,
    var(--blue-soft) 85%,
    var(--surface-2)
  ) !important;
  transform: translateY(1px);
}
.menu-item2[aria-selected="true"]:active {
  border: 2.5px solid;
  background: color-mix(
    in srgb,
    var(--blue-soft2) 85%,
    var(--surface-2)
  ) !important;
  color: var(--blue) !important;
}
.menu-item2[aria-selected="true"]:hover {
  background: color-mix(
    in srgb,
    var(--blue-soft2) 25%,
    var(--surface-2)
  ) !important;
  color: var(--blue) !important;
}
.hint-button:hover,
.cancel-button:hover,
.number-button:hover,
.menu-item:hover,
.theme-toggle:hover {
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--surface-2) !important;
  transition: transform 0.12s ease, background 0.14s ease, color 0.14s ease,
    box-shadow 0.14s ease;
}
.history-button:hover:not(:disabled) {
  color: var(--muted);
  background: var(--surface-2) !important;
  transition: transform 0.12s ease, background 0.14s ease, color 0.14s ease,
    box-shadow 0.14s ease;
}
.new-main:hover,
.new-side:hover,
.new-main2:hover {
  transition: transform 0.12s ease, background 0.14s ease, color 0.14s ease,
    box-shadow 0.14s ease;
}
.new-main2:hover {
  transition: transform 0.12s ease, background 0.14s ease, color 0.14s ease,
    box-shadow 0.14s ease;
}
.menu-item:hover {
  color: var(--text) !important;
}
.pencil-button:hover,
.erase-button:hover {
  background: var(--pencilerasebutton);
}
.new-main:hover {
  border-radius: var(--radius) 0 0 var(--radius) !important;
  background: var(--blue);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 850;
}
.new-main2:hover {
  border-top-right-radius: 999px !important;
  border-bottom-right-radius: 999px !important;
  background: var(--blue);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 850;
  border-radius: var(--radius);
}
.new-side:hover {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  background: color-mix(in srgb, var(--blue) 86%, #000);
  color: #fff;
  display: grid;
  place-items: center;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius);
}
.pencil-button[aria-pressed="true"]:active {
  color: color-mix(in srgb, var(--lime-text) 80%, #fff);
  background: color-mix(in srgb, var(--lime-soft) 80%, #fff);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lime) 90%, transparent);
}
.pencil-button[aria-pressed="true"]:hover {
  color: var(--lime-text);
  background: var(--lime-soft);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lime) 68%, transparent);
}
.erase-button[aria-pressed="true"] {
  color: var(--lime-text);
  background: var(--lime-soft);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lime) 68%, transparent);
}
.erase-button[aria-pressed="true"]:active {
  color: color-mix(in srgb, var(--lime-text) 80%, #fff);
  background: color-mix(in srgb, var(--lime-soft) 80%, #fff);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lime) 90%, transparent);
}
.erase-button[aria-pressed="true"]:hover {
  color: var(--lime-text);
  background: var(--lime-soft);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lime) 68%, transparent);
}
.pencil-button[aria-pressed="true"]:hover {
  color: var(--lime-text);
  background: var(--lime-soft);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lime) 68%, transparent);
}
.erase-button[aria-pressed="true"]:hover {
  color: var(--lime-text);
  background: var(--lime-soft);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lime) 68%, transparent);
}
.hint-button:active,
.pencil-button:active:not([aria-pressed="true"]),
.new-main2:active,
.number-button:active,
.cancel-button:active,
.erase-button:active:not([aria-pressed="true"]),
.menu-item:active,
.theme-toggle:active {
  background: color-mix(
    in srgb,
    var(--blue-soft2) 85%,
    var(--surface-2)
  ) !important;
  color: var(--muted);
  transform: translateY(1px);
  border-radius: 999px;
}
.history-button:active:not(:disabled) {
  background: color-mix(
    in srgb,
    var(--blue-soft2) 85%,
    var(--surface-2)
  ) !important;
  color: var(--muted);
  transform: translateY(1px);
}
.new-main:active,
.new-side:active {
  background: color-mix(
    in srgb,
    var(--blue-soft2) 85%,
    var(--surface-2)
  ) !important;
  color: var(--muted);
  transform: translateY(1px);
}
.new-main:active {
  border-radius: var(--radius) 0 0 var(--radius) !important;
}
.new-side:active {
  border-radius: 0 var(--radius) var(--radius) 0 !important;
}
.delete-button:hover {
  background: var(--delete-save) !important;
}
.delete-button:active {
  background: color-mix(
    in srgb,
    var(--delete-save) 70%,
    var(--surface-2)
  ) !important;
}
.menu-item2[aria-selected="true"]:active {
  color: var(--blue) !important;
}
pencileraserbutton:disabled {
  background: var(--disabledbox) !important;
  background-color: var(--disabledbox) !important;
  cursor: not-allowed !important;
}