.bar {
  * {
    font-size: $font-size * $bar-scaling/100;
  }

  .bar-panel-container {
    margin-top: if($bar-floating, $bar-margin_top, 0em);
    margin-bottom: if($bar-floating, $bar-margin_bottom, 0em);
    margin-left: if($bar-floating, $bar-margin_sides, 0em);
    margin-right: if($bar-floating, $bar-margin_sides, 0em);
  }


  .bar-panel {
    $bar-opacity-ratio: $bar-opacity / 100;
    $transparency-value: 1 - $bar-opacity-ratio;
    background: if($bar-transparent, transparent, transparentize($bar-background, $transparency-value));
    border-radius: if($bar-floating, $bar-border_radius, 0em);
  }
}

$bar-button-background-opacity-ratio: $bar-buttons-background_opacity / 100;
$transparency-value: 1 - $bar-button-background-opacity-ratio;

$bar-button-background-hover-opacity-ratio: $bar-buttons-background_hover_opacity / 100;
$transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;

.bar_item_box_visible {
  background-color: transparentize($bar-buttons-background, $transparency-value);
  border-radius: $bar-buttons-radius;
  padding: 0.2rem 0.9rem;
  margin: $bar-buttons-y_margins $bar-buttons-spacing;
  opacity: $bar-buttons-opacity/100;

  &:hover {
    background: transparentize($bar-buttons-hover, $transparency-value-hover);
  }

  &.battery {
    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-battery-background), $transparency-value);

    &:hover {
      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-battery-hover), $transparency-value-hover);
    }
  }

  &.bluetooth {
    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-bluetooth-background), $transparency-value);

    &:hover {
      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-bluetooth-hover), $transparency-value-hover);
    }
  }

  &.clock {
    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-clock-background), $transparency-value);

    &:hover {
      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-clock-hover), $transparency-value-hover);
    }
  }

  &.media {
    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-media-background), $transparency-value);

    &:hover {
      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-media-hover), $transparency-value-hover);
    }
  }

  &.dashboard {
    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-background), $transparency-value);

    &:hover {
      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-dashboard-hover), $transparency-value-hover);
    }
  }

  &.network {
    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-network-background), $transparency-value);

    &:hover {
      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-network-hover), $transparency-value-hover);
    }
  }

  &.notifications {
    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-notifications-background), $transparency-value);

    &:hover {
      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-notifications-hover), $transparency-value-hover);
    }
  }

  &.systray {
    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-systray-background), $transparency-value);

    &:hover {
      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-systray-hover), $transparency-value-hover);
    }
  }

  &.volume {
    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-volume-background), $transparency-value);

    &:hover {
      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-volume-hover), $transparency-value-hover);
    }
  }

  &.windowtitle {
    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-windowtitle-background), $transparency-value);

    &:hover {
      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-windowtitle-hover), $transparency-value-hover);
    }
  }

  &.workspaces {
    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-workspaces-background), $transparency-value);
  }
}

.bar_item_box_hidden {
  background: none;
  border-radius: 0rem;
  padding: 0rem 0rem 0rem 0rem;
  margin: 0rem 0rem 0rem 0rem;
}

.box-left {
  margin-left: $bar-outer_spacing;
}

.box-right {
  margin-right: $bar-outer_spacing;
}