broadcast/ui/src/features/radio/Radio.module.scss

@-webkit-keyframes rotor{
  from{ -webkit-transform: rotate(0deg); }
  to{ -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotor{
  from{ -moz-transform: rotate(0deg); }
  to{ -moz-transform: rotate(360deg); }
}
@-o-keyframes rotor{
  from{ -o-transform: rotate(0deg); }
  to{ -o-transform: rotate(360deg); }
}
@keyframes rotor{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

$circle-size: 350px;
$inner-size: 310px;
$border-radius: 160px;
$margin: 20px;
$shadow-size: 20px;
$rotor-color-active: #6eeb34;
$rotor-color-stopped: #ff0000;
$rotor-color-loading: #fcc203;
$disconnected-color: #8a8987;
$hover-color: #fff7b0;

@mixin wedge($color) {
  background-image: linear-gradient(45deg,
  white 0%,
  white 30%,
  $color 30%,
  $color 70%,
  white 70%,
  white 100%);
}

@mixin rotor-animation {
  -webkit-animation: rotor 1.5s linear 0s infinite normal;
  -mox-animation: rotor 1.5s linear 0s infinite normal;
  -o-animation: rotor 1.5s linear 0s infinite normal;
  animation: rotor 1.5s linear 0s infinite normal;
}

@mixin circle-shape {
  width: $circle-size;
  height: $circle-size;
  border-radius: $border-radius;
  /*** outer circle position: under */
  z-index: 1;
  position: absolute;
}

.buttonWrap {
  width: $circle-size;
  height: $circle-size;
  margin: $margin 0;
  display: inline-block;
  position: relative;

  /* Inner circle */
  .clicker {
    width: $inner-size;
    height: $inner-size; /* 20px smaller b/c of margin below */
    margin: $margin;
    background-color: #fff;
    border-radius: $border-radius;

    /* Overlays this circle on the .circle */
    z-index: 2;
    position: absolute;

    /* centers the text: adjust to desired size */
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    text-align: center;
    font-size: 60px;
    user-select: none;

    /* shadow */
    -webkit-box-shadow: 0px 0px $shadow-size 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:    0px 0px $shadow-size 0px rgba(0, 0, 0, 0.5);
    -o-box-shadow:      0px 0px $shadow-size 0px rgba(0, 0, 0, 0.5);
    box-shadow:         0px 0px $shadow-size 0px rgba(0, 0, 0, 0.5);

    &:hover {
      background-color: $hover-color;
    }
  }

  /** outer circle **/
  .circleDisconnected {
    @include circle-shape;
    background-color: $disconnected-color;
  }

  .circleStarted {
    @include circle-shape;
    @include wedge($rotor-color-active);
    @include rotor-animation;
  }

  .circleLoading {
    @include circle-shape;
    @include wedge($rotor-color-loading);
    @include rotor-animation;
  }

  .circleStopped {
    @include circle-shape;
    background-color: $rotor-color-stopped;
  }
}