button {
  padding: 0px 10px;
  color: $primary;
  background-color: rgba($surface_container, 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%);
    }
  }
  transition: all $transition-time;
}