$pressed-button-margin: 2px;
$input-padding: 5px;
$search-box-offset: 10px;
$navigation-bar-height: 27px; // TODO: having this hardcoded is ugly
$search-box-offset-navigation-bar: $search-box-offset + $navigation-bar-height;
$border-radius: 3px;

$padding: var(--jse-padding);
$padding-half: calc(0.5 * var(--jse-padding));
$padding-double: calc(2 * var(--jse-padding));
$menu-padding: 5px;
$bottom-height: 5px;
$contents-padding: 2px;
$contents-min-height: 150px;
$errors-overview-max-height: 25%;

@mixin jsoneditor-button {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--jse-font-family);
  font-size: var(--jse-font-size);
  padding: $menu-padding;
  margin: 0;
}

@mixin jsoneditor-button-primary {
  @include jsoneditor-button;

  background: var(--jse-button-primary-background);
  color: var(--jse-button-primary-color);
  padding: $padding $padding-double;
  border-radius: $border-radius;

  &:hover {
    background: var(--jse-button-primary-background-highlight);
  }

  &:disabled {
    background: var(--jse-button-primary-background-disabled);
  }
}