/* general styles */

$round: 8px;
$round2: calc($round * 2);
$margin: 0.4rem;
$padding: 0.4rem;
$border-width: 2px;
$scale: 0.5rem;

@mixin animate {
  transition: 200ms;
}

* {
  color: $fg;
}

/* mixins */
@mixin window-rounding {
  border-radius: $round2;
}

@mixin rounding {
  border-radius: calc($round2 - $padding - $border-width);
}

@mixin window-box {
  @include rounding;

  background: $surface;
  box-shadow: 0 1px 5px -5px rgba(0, 0, 0, 0.5);
  margin: $margin;
  padding: $padding;
}

@mixin window {
  @include border;
  @include window-rounding;

  background: $bg;
  margin: 5px 10px 15px;
  padding: $padding;
}

tooltip {
  background: $tooltip-bg;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 rgba(0, 0, 0, 0.4);
  border-radius: $round;
}

/* scales & progress bars */
scale,
progressbar {
  trough {
    background-color: $surface;
    border-radius: $scale;
    min-width: calc($scale * 10);
    padding: 0 calc($scale / 2);
  }

  highlight,
  progress {
    background: $overlay;
    border-radius: $scale;
    margin: 0 calc(0px - $scale / 2);
    min-height: $scale;
  }
}

@mixin button-active {
  @include animate;
  background: $button-enabled;
  border-radius: 5rem;
  padding: 0.4rem;

  &:hover {
    background: $button-enabled-hover;
  }
}

@mixin button {
  @include animate;
  background: $button-disabled;
  border-radius: 5rem;
  padding: 0.4rem;

  &:hover {
    background: $button-disabled-hover;
  }
}

.button {
  @include button-active;
}

.button.disabled {
  @include button;
}