@define-color accent_color @orange_5;
@define-color accent_bg_color @orange_3;

.sourceview {
  padding: 0px 12px;
  padding-bottom: 8px;
  padding-left: 0px;
  font-size: 1.4em;
  border-top: 1px solid @card_shade_color;
}

.info-view {
  padding: 0px;
  padding-bottom: 4px;
}

.equation-symbol {
  padding: 0px 12px;
}

.display-container {
  margin: 6px 12px 0 12px;
  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

clamp > grid.small .display-container {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
}

.display-container:last-child {
  margin-bottom: 12px;
}

clamp > grid > :first-child {
  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  margin-top: 12px;
}

clamp > grid.small > :first-child {
  margin-top: 0;
}

clamp > grid.small > .display-container:last-child {
  margin-bottom: 0;
}

.math-buttons > grid {
  /* 5 44px high buttons and 4px spacing. */
  min-height: calc(44px * 5 + 4px * 4);
  /* 5 60px wide buttons and 4px spacing. */
  /* Update the clamp size in templates accordingly. */
  min-width: calc(60px * 5 + 4px * 4 - 6px);
  margin-left: 12px;
  margin-right: 12px;
  margin-top: 12px;
  margin-bottom: 12px;
  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.math-buttons.unfolded:not(.basic-buttons) > grid:first-child {
  margin-right: 6px;
}

.math-buttons.unfolded:not(.basic-buttons) > grid:last-child {
  margin-left: 6px;
}

.converter,
mathconverter {
  /* Prevents the squeezer transition from being cut 12px away from the border */
  padding: 6px 12px 0 12px;
}

.converter > :not(squeezer):not(:first-child),
mathconverter > :not(squeezer):not(:first-child),
.converter > squeezer:not(:first-child) > :first-child,
mathconverter > squeezer:not(:first-child) > :first-child {
  /* Prevents the squeezer transition from being cut 12px away from the border */
  margin-left: 6px;
}

.bit-panel {
  padding: 6px;
  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  margin: 6px 0 0 0;
}

clamp > :not(.small) .bit-panel {
  margin: 6px 12px 0 12px;
}

clamp  > .small .bit-panel {
  padding-top:4px;
  padding-bottom: 4px;
  font-size: 0.9em;
  border-radius: 0;
}

clamp > .small .bit-panel button {
  min-height: 20px;
}

.math-buttons button {
  font-size: 1.1em;
  /* Counter the button.text-button style. */
  padding: 2px 4px 2px 4px;
}

.math-buttons grid > button,
.math-buttons grid > menubutton > button {
  font-weight: inherit;
}

.math-buttons .number-button {
  font-size: 1.2em;
  font-weight: bolder;
  background-color: alpha(currentColor, .2);
}

.math-buttons .clear-button {
  font-size: 1.2em;
  font-weight: bolder;
}

.math-buttons .number-button:hover {
  background-color: alpha(currentColor, .25);
}

.math-buttons .number-button:active,
.math-buttons .number-button.keyboard-activating {
  background-color: alpha(currentColor, .35);
}

.bit-toggle-button {
  padding: 1px;
  min-width: 9px;
}

.bit-marker-label {
  margin: 0 12px;
}

clamp > grid.small > widget > .history-view {
  border-width: 0px 0px;
  margin: 0px 0 0 0;
}

.history-view {
  background-color: shade(@card_bg_color, .95);
  color: inherit;
}

.history-view list {
  background: none;
  color: inherit;
}

.history-entry {
  border-top: 1px solid @card_shade_color;
  padding: 6px 3px;
  font-size: 1.3em;
}

.history-entry:first-child {
  border-top-width: 0px;
}

.history-entry .equation-label {
  /* word-spacing: 2px; Doesn't work (yet) in GTK */
}

.history-entry .equation-symbol {
  font-weight: lighter;
}

/* Used for MathVariablePopover */
row.popover-row {
  border-bottom: 1px solid @borders;
  min-height: 35px;
}

window > leaflet > * {
  min-width: 360px;
}

.italic {
  font-style: italic;
}

mathdisplay textview,
mathdisplay textview text {
  background: none;
  color: inherit;
}

.history-entry {
  font-feature-settings: "tnum";
}

mathdisplay textview:not(:last-child) {
  font-feature-settings: "tnum";
}
