// The following rules are styling the stream player
// that I'm using on top of live section pages.
// It doesn't belong to the theme, but to my website
// so it is here.

@use "@picocss/pico/scss/colors/index" as *;

.stream {
  .status-player {
    display: flex;

    audio {
      border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) 0;
    }
  }
}

// Rules used by the off and on classes below
@mixin status {
  display: flex;
  border-radius: var(--pico-border-radius) 0 0 var(--pico-border-radius);
  flex-grow: 1;
  flex-direction: column;
  justify-content: space-around;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  padding: 0 calc(var(--pico-spacing)/2);
  margin: 0;
  color: $grey-50;
}

.off {
  @include status;
  background-color: $red-500;
}

.on {
  @include status;
  background-color: $green-500;
}

// End of the stream section