&.revealer-on-hover {
//  border: 2px solid $bar-bg-color;
//  border: 2px solid $module-color;
  border-radius: $bar-module-border-radius;//
}

//.reveal-children>button>image,
.reveal-children>widget>image {
  padding: 0px 7px;
}
.revealer-preview,
.reveal-children>* {
  padding: 0px 7px;
  min-width: $bar-module-width;
  transition: all 0.3s;
  background-color: rgba($bar-bg-color,0.5);
    &:hover {
      background: linear-gradient(rgba($bar-bg-color,0.5) 15%, rgba($module-color,0.5));
//      background: linear-gradient(mix(rgba($bar-bg-color,0.5), rgba($module-color,0.5)) 15%, rgba($bar-bg-color,0.5));
    }
    &.active {
      background: mix(rgba($bar-bg-color,0.5), rgba($module-color,0.5),25%);
      &:hover {
        background: linear-gradient(mix(rgba($bar-bg-color,0.5), rgba($module-color,0.5)) 15%, rgba($bar-bg-color,0.5));
      }
    }
    &.inactive {
      background-color: rgba($bar-bg-color,0.3);
      color: rgba($bar-fg-color,0.5);
      &:hover {
        background: linear-gradient(rgba($bar-bg-color,0.3) 15%, rgba($module-color,0.3));
      }
    }
}
.revealer-preview {
//  box-shadow: inset 0px -7px 9px -4px rgba($module-color,0.4);
//  background-color: $bar-bg-color;
  border-radius: $bar-module-border-radius;
}
&.true .revealer-preview {
  border-radius: $bar-module-border-radius 0 0 $bar-module-border-radius;
}
.reveal-children {
  >* {
    border-left: 2px solid $module-color;
    &:last-child {
      border-radius: 0 $bar-module-border-radius $bar-module-border-radius 0;
    }
  }
}