/* 
 * #################################
 * #       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,
    $borderEnabled,
    $borderColor,
    $fontSize: 1em
) {
    $bar-button-background-opacity-ratio: $bar-buttons-background_opacity * 0.01;
    $transparency-value: 1 - $bar-button-background-opacity-ratio;

    $bar-button-background-hover-opacity-ratio: $bar-buttons-background_hover_opacity * 0.01;
    $transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;
    .bar_item_box_visible {
        &.#{$class} {
            background: transparentize(
                if($bar-buttons-monochrome, $bar-buttons-background, $labelBackground),
                $transparency-value
            );
            border: if(
                $borderEnabled or $bar-buttons-enableBorders,
                $bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-icon, $borderColor),
                0em
            );

            &.style2 {
                background: transparent;
            }

            &:hover {
                opacity: $bar-buttons-background_hover_opacity * 0.01;
            }
        }
    }

    .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_background, $iconBackground);
            padding-right: $spacing;
            color: if($bar-buttons-monochrome, $bar-buttons-icon, $iconColor);
            border-top-left-radius: if(
                $borderEnabled or $bar-buttons-enableBorders,
                $bar-buttons-radius * 0.4,
                $bar-buttons-radius
            );
            border-bottom-left-radius: if(
                $borderEnabled or $bar-buttons-enableBorders,
                $bar-buttons-radius * 0.4,
                $bar-buttons-radius
            );
        }

        .module-label.#{$class} {
            background: transparentize($labelBackground, $transparency-value);
            padding-left: $spacing * 1.5;
            margin-left: 0em;
            border-top-left-radius: 0em;
            border-bottom-left-radius: 0em;
        }
        &.no-label.#{$class} {
            .module-icon {
                border-top-right-radius: if(
                    $borderEnabled or $bar-buttons-enableBorders,
                    $bar-buttons-radius * 0.4,
                    $bar-buttons-radius
                );
                border-bottom-right-radius: if(
                    $borderEnabled or $bar-buttons-enableBorders,
                    $bar-buttons-radius * 0.4,
                    $bar-buttons-radius
                );
            }
        }
    }
}

/* 
 * #################################
 * #      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,
    //
    // if border enabled
    $bar-buttons-modules-ram-enableBorder,
    // border color
    $bar-buttons-modules-ram-border
);

/* 
 * #################################
 * #      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,
    // if border enabled
    $bar-buttons-modules-cpu-enableBorder,
    // border color
    $bar-buttons-modules-cpu-border,
    // 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,
    // if border enabled
    $bar-buttons-modules-storage-enableBorder,
    // border color
    $bar-buttons-modules-storage-border,
    // 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,
    // if border enabled
    $bar-buttons-modules-netstat-enableBorder,
    // border color
    $bar-buttons-modules-netstat-border,
    // 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,
    // if border enabled
    $bar-buttons-modules-kbLayout-enableBorder,
    // border color
    $bar-buttons-modules-kbLayout-border,
    // 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,
    // if border enabled
    $bar-buttons-modules-updates-enableBorder,
    // border color
    $bar-buttons-modules-updates-border,
    // custom font size
    1.2em //
);

/* 
 * #################################
 * #    Submap Module Styling      #
 * #################################
 */
@include styleModule(
    //
    // class name
    'submap',
    // label color
    $bar-buttons-modules-submap-text,
    // icon color
    $bar-buttons-modules-submap-icon,
    // icon background if split style is used
    $bar-buttons-modules-submap-icon_background,
    // label background
    $bar-buttons-modules-submap-background,
    // inner spacing
    $bar-buttons-modules-submap-spacing,
    // if border enabled
    $bar-buttons-modules-submap-enableBorder,
    // border color
    $bar-buttons-modules-submap-border,
    // 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,
    // if border enabled
    $bar-buttons-modules-weather-enableBorder,
    // border color
    $bar-buttons-modules-weather-border,
    // 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,
    // if border enabled
    $bar-buttons-modules-power-enableBorder,
    // border color
    $bar-buttons-modules-power-border,
    // custom font size
    1.3em //
);