/* 
 * #################################
 * #       Default Styling         #
 * #################################
 */
.bar-button-label {
  margin-left: 0.5em;
  color: $text;
}

.module-icon {
  font-size: 1em;
}

.style2 {
  .bar-button-icon {
    border-top-left-radius: $bar-buttons-radius;
    border-bottom-left-radius: $bar-buttons-radius;
    padding: $bar-buttons-padding_y 0em;
    padding-left: $bar-buttons-padding_x;
    padding-right: 0.5em;
    background: $text;
    color: $bar-background;
  }

  .bar-button-label {
    padding: $bar-buttons-padding_y 0em;
    padding-right: $bar-buttons-padding_x;
    padding-left: 0.5em;
    margin-left: 0em;
  }
}

/* 
 * #################################
 * #        Styling Function       #
 * #################################
 */
@mixin styleModule($class, $textColor, $iconColor, $iconBackground, $labelBackground, $spacing, $fontSize: 1em) {
  .bar_item_box_visible {
    &.#{$class} {
      background: $labelBackground;

      &.style2 {
        background: transparent;
      }

      &:hover {
        opacity: 0.5;
      }
    }
  }


  .module-label.#{$class} {
    color: if($bar-buttons-monochrome, $bar-buttons-text, $textColor);
    margin-left: $spacing;
    border-radius: $bar-buttons-radius;
  }

  .module-icon.#{$class} {
    color: if($bar-buttons-monochrome, $bar-buttons-icon, $iconColor);
    font-size: if($fontSize, $fontSize, 1em);
  }

  .style2 {
    .module-icon.#{$class} {
      background: if($bar-buttons-monochrome, $bar-buttons-icon, $iconBackground);
      padding-right: $spacing;
      color: if($bar-buttons-monochrome, $bar-buttons-background, $iconColor);
    }

    .module-label.#{$class} {
      background: $labelBackground;
      padding-left: $spacing * 1.5;
      margin-left: 0em;
      border-top-left-radius: 0em;
      border-bottom-left-radius: 0em;
    }
  }
}

/* 
 * #################################
 * #      Ram Module Styling       #
 * #################################
 */
@include styleModule( //
  // class name
  'ram',
  // label color
  $bar-buttons-modules-ram-text,
  // icon color
  $bar-buttons-modules-ram-icon,
  // icon background if split style is used
  $bar-buttons-modules-ram-icon_background,
  // label background
  $bar-buttons-modules-ram-background,
  // inner spacing
  $bar-buttons-modules-ram-spacing //
);

/* 
 * #################################
 * #      Cpu Module Styling       #
 * #################################
 */
@include styleModule( //
  // class name
  'cpu',
  // label color
  $bar-buttons-modules-cpu-text,
  // icon color
  $bar-buttons-modules-cpu-icon,
  // icon background if split style is used
  $bar-buttons-modules-cpu-icon_background,
  // label background
  $bar-buttons-modules-cpu-background,
  // inner spacing
  $bar-buttons-modules-cpu-spacing,
  // custom font size
  1.05em //
);

/* 
 * #################################
 * #    Storage Module Styling     #
 * #################################
 */
@include styleModule( //
  // class name
  'storage',
  // label color
  $bar-buttons-modules-storage-text,
  // icon color
  $bar-buttons-modules-storage-icon,
  // icon background if split style is used
  $bar-buttons-modules-storage-icon_background,
  // label background
  $bar-buttons-modules-storage-background,
  // inner spacing
  $bar-buttons-modules-storage-spacing,
  // custom font size
  1.3em //
);

/* 
 * #################################
 * #    Netstat Module Styling     #
 * #################################
 */
@include styleModule( //
  // class name
  'netstat',
  // label color
  $bar-buttons-modules-netstat-text,
  // icon color
  $bar-buttons-modules-netstat-icon,
  // icon background if split style is used
  $bar-buttons-modules-netstat-icon_background,
  // label background
  $bar-buttons-modules-netstat-background,
  // inner spacing
  $bar-buttons-modules-netstat-spacing,
  // custom font size
  1.2em //
);

/* 
 * #################################
 * #    KB Layout Module Styling   #
 * #################################
 */
@include styleModule( //
  // class name
  'kblayout',
  // label color
  $bar-buttons-modules-kbLayout-text,
  // icon color
  $bar-buttons-modules-kbLayout-icon,
  // icon background if split style is used
  $bar-buttons-modules-kbLayout-icon_background,
  // label background
  $bar-buttons-modules-kbLayout-background,
  // inner spacing
  $bar-buttons-modules-kbLayout-spacing,
  // custom font size
  1.2em //
);

/* 
 * #################################
 * #    Updates Module Styling     #
 * #################################
 */
@include styleModule( //
  // class name
  'updates',
  // label color
  $bar-buttons-modules-updates-text,
  // icon color
  $bar-buttons-modules-updates-icon,
  // icon background if split style is used
  $bar-buttons-modules-updates-icon_background,
  // label background
  $bar-buttons-modules-updates-background,
  // inner spacing
  $bar-buttons-modules-updates-spacing,
  // custom font size
  1.2em //
);

/* 
 * #################################
 * #    Weather Module Styling     #
 * #################################
 */
@include styleModule( //
  // class name
  'weather-custom',
  // label color
  $bar-buttons-modules-weather-text,
  // icon color
  $bar-buttons-modules-weather-icon,
  // icon background if split style is used
  $bar-buttons-modules-weather-icon_background,
  // label background
  $bar-buttons-modules-weather-background,
  // inner spacing
  $bar-buttons-modules-weather-spacing,
  // custom font size
  1.2em //
);

/* 
 * #################################
 * #    Power Module Styling       #
 * #################################
 */
@include styleModule( //
  // class name
  'powermodule',
  // label color
  $red,
  // icon color
  $bar-buttons-modules-power-icon,
  // icon background if split style is used
  $bar-buttons-modules-power-icon_background,
  // label background
  $bar-buttons-modules-power-background,
  // inner spacing
  $bar-buttons-modules-power-spacing,
  // custom font size
  1.3em //
);