dotfiles/de/home/.config/eww/style/bar.scss

$bar-reveal-children-bg-color: rgba($color0, 0.2);
$transition-time: 0.3s;

.bar.horizontal {
  font-size: 1.05em;
  padding: 6px;
  margin: 4px 10px;
  background-color: rgba($bar-bg-color, 0.2);
  border-radius: $bar-module-border-radius;

  .leftgroup,
  .centergroup,
  .rightgroup {
    .revealer-on-hover {
      border: 2px solid $bar-bg-color;
      border-radius: $bar-module-border-radius;
    }

    .revealer-on-hover>widget>box>box>*,
    .revealer-on-hover>widget>box>box>button {
      color: $color0;
      background-color: $bar-bg-color;
      border-radius: $bar-module-border-radius - 4;
      &:hover {
      }
    }
    .reveal_children {
      &>*,
      widget>image {
        &:not(:last-child) {
          border-right: 2px solid $bar-bg-color;
        }
        color: $bar-bg-color;
      }
    }

    .revealer-on-hover.true {
      border-radius: $bar-module-border-radius;
      &>widget>box>box>* {
        background-color: $bar-bg-color;
      }
    }
    .reveal_children {
      border-radius: 0px $bar-module-border-radius $bar-module-border-radius 0px;
    }
  }

/*  .profile-personal {
    background-color: rgba($bar-bg-color, 0.5);
  }
  .profile-development {
    background-color: rgba(mix($color9, $color12), 0.5);
  }
  .profile-school {
    background-color: rgba(mix($color5, $color3), 0.5);
  }
  .profile-work {
    background-color: rgba(mix($color5, $color4, 30%), 0.5);
  }*/

  .profile {
    margin-left: 10px;
    font-size: 0.95em;
    font-weight: bold;
    border: 2px solid $bar-bg-color;
    border-right: 0px solid transparent;
    border-radius: $bar-module-border-radius 0px 0px $bar-module-border-radius;
    color: $bar-bg-color;
    &.profile-personal {
      background-color: transparent;
      color: $bar-bg-color;
      border-color: $bar-bg-color;
    }
    &.profile-development {
      color: $color0;
      background-color: mix($color9, $color12);
      border-color: mix($color9, $color12);
    }
    &.profile-school {
      color: $color0;
      background-color: mix($color5, $color3);
      border-color: mix($color5, $color3);
    }
    &.profile-work {
      color: $color0;
      background-color: mix($color5, $color4, 30%);
      border-color: mix($color5, $color4, 30%);
    }
  }

  .workspaces {
    margin: 0px 0px;
    box.ws-center {
      >box>button {
        background-color: $bar-bg-color;
        color: $bar-module-fg-color;
        border-radius: 0px $bar-module-border-radius - 3 $bar-module-border-radius - 3 0px;
      }
      &.true>box>button {
        border-radius: $bar-module-border-radius - 3;
      }
    }
    border: 2px solid $bar-bg-color;
    border-left: 0px solid transparent;
    border-radius: 0px $bar-module-border-radius $bar-module-border-radius 0px;
    revealer {
      &.ws-left {
        >box>box {
          color: $bar-bg-color;
            border-left: 2px solid $bar-bg-color;
        }
      }
      &.ws-right {
        >box>box {
          color: $bar-bg-color;
          &:not(:last-child){
            border-right: 2px solid $bar-bg-color;
          }
          &:last-child {
            border-radius: 0px $bar-module-border-radius $bar-module-border-radius 0px;
          }
        }
      }
    }
    button {
      min-width: 35px;
      padding: 1px 2px;
      transition: all 0.3s;
      label {
        padding: 2px 6px;
        margin-right: -10px;
      }
      .workspace-number {
        margin: 0px;
        margin-left: -2px;
        margin-top: -6px;
        padding: 0px;
        font-size: 0.6em;
      }
      &:hover {
        text-shadow: $bar-bg-color;
        color: darker($bar-bg-color);
      }
    }
  }

/*  .active_window {
    border: 2px solid $bar-bg-color;
    color: $bar-bg-color;
    padding: 0px 10px;
    border-radius: $bar-module-border-radius;
    margin-left: 10px;
  }*/

  .scratchpad {
//    margin-left: 10px;
    &>widget>box>box>label {
      padding: 0px 10px;
    }
  }

  scale trough,
  progressbar>trough {
    background-color: $color9;
    min-width: 50px;
    min-height: 10px;
    border-radius: 4px;
  }
  scale trough highlight,
  progressbar>trough>progress {
    background-color: $color2;
    border-radius: 4px;
    min-height: 10px;
  }
  circular-progress {
    color: $color9;
    background-color: $color2;
  }
  &>box>button,
  &>box>label,
  .bar-module>button,
  .bar-module>label,
  .revealer-on-hover>widget>box>box>*,
  .reveal_children>widget>image,
  .reveal_children:not(.tray)>* {
    padding: 0px 5px;
    min-width: $bar-module-width;
    transition: all 0.3s;
    &:hover {
      color: $bar-hover-fg-color;
      text-shadow: $bar-module-hover-shadow;
    }
  }
  .tray>widget>image {
    padding: 3px 10px;
    min-width: $bar-module-width;
  }
  .tray>widget,
  .scratchpad>button {
    image{
      opacity: 0.5;
      transition: all 0.3s;
      border-radius: $bar-module-border-radius;
    }
    &:hover,&:hover image {
      opacity: 1;
    }
  }

  @import "./bar/window_title.scss";
  @import "./bar/idle-inhibitor.scss";
  @import "./bar/volume.scss";
  @import "./bar/networking.scss";
  @import "./bar/bluetooth.scss";
  @import "./bar/power.scss";
  @import "./bar/disk.scss";
  @import "./bar/memory.scss";
  @import "./bar/clock.scss";

  .chevron box {
    border: 2px solid transparent;
  }
/*  .inactive {
    opacity: 0.5;
  }*/

  // HOTFIXES

  .scratchpad .reveal_children>*:last-child,
  .tray_tab>widget>box>box,
  .tray_tab .reveal_children>widget:last-child>image {
    margin-right: -5px;
  }
}