.reveal-children>widget>image {
  padding: 0px 7px;
}
.reveal-children>button,.reveal-children>widget {
  border: 0px;
}
.revealer-preview,
.reveal-children>* {
  padding: 0px 7px;
  min-width: $bar-module-width;
  transition: all 0.3s;
  background-color: rgba($surface_container,0.5);
  color: $primary;
    &.scratchpad-item.inactive>image {
      opacity: 0.5;
    }
    &:hover {
      background: mix(rgba($surface_container,0.5), rgba($primary,0.5), 80%);
    }
    &.active {
      background: rgba($surface_container_highest,0.5);
      color: $primary;
      &:hover {
        background: mix(rgba($surface_container_highest,0.5), rgba($primary,0.5), 80%);
      }
      & image {
        opacity: 1;
      }
    }
    &.inactive {
      background-color: rgba($surface_container_lowest,0.5);
      color: rgba($primary,0.5);
      &:hover {
        background: mix(rgba($surface_container_lowest,0.5), rgba($primary, 0.5), 80%);
      }
    }
}