@import 'compass/css3';
@import 'fontsmoothing';

.chromecast-playback {
  height: 100%;
  width: 100%;

  .chromecast-playback-background, .chromecast-playback-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
  }

  .chromecast-playback-background {
    background-size: contain;
  }

  .chromecast-playback-overlay {
    background-color: #000;
    opacity: 0.4;
  }
}

.chromecast-button {
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 0;
  margin: 0 6px;
  color: #fff;
  opacity: 0.5;
  vertical-align: middle;
  text-align: left;
  cursor: pointer;
  @include font-smoothing(antialiased);
  @include transition(all 0.1s ease);

  &:hover {
    opacity: 0.75;
    text-shadow: rgba(255,255,255,0.8) 0 0 5px;
  }

  &:focus {
    outline: none;
  }

  svg {
    width: 24px;
    height: 24px;
    #cast, #cast-on, #Path {
      fill: #fff;
      stroke: #fff;
      stroke-width: 0.5px;
    }
  }
}