@import '../../styles/exported.scss';

.player {
  .cast-button {
    display: block;
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0);
    border: none;
    cursor: pointer;
    --connected-color: #{$tone-2-color};
    --disconnected-color: #{$tone-2-color};

    &:hover {
      --connected-color: #ffffffff;
      --disconnected-color: #ffffffff;
    }

    &.cast-button-active {
      --connected-color: rgba(1, 172, 205, 0.8);

      &:hover {
        --connected-color: #{$primary-color};
      }
    }
  }
}