codevise/pageflow

$background-media-unmute-button-color: rgba(53, 53, 53, 0.9) !default;

$background-media-unmute-button-shadow-color: #ccc !default;

$background-media-unmute-button-icon-color: #ddd !default;

$background-media-unmute-button-icon-size: 24px !default;

$background-media-unmute-button-size: 34px !default;

$background-media-unmute-button-margin: 10px !default;

$background-media-unmute-button-custom-image: false !default;

.background_media_unmute_button {
  position: absolute;
  top: 26px;
  right: 25px;
  width: $background-media-unmute-button-size + $background-media-unmute-button-margin;
  height: $background-media-unmute-button-size + $background-media-unmute-button-margin;

  @extend %pageflow_widget_margin_right_max !optional;
  @extend %pageflow_widget_margin_top !optional;

  @include mobile {
    top: 70px;
    right: 11px;
  }

  @if not $background-media-unmute-button-custom-image {
    &:after {
      content: "";
      display: block;
      position: absolute;
      top: 6px;
      left: 6px;
      width: $background-media-unmute-button-size;
      height: $background-media-unmute-button-size;
      border-radius: $background-media-unmute-button-size / 2;
      background-color: $background-media-unmute-button-color;
      box-shadow: 0 0 7px $background-media-unmute-button-shadow-color;
      z-index: 1;
    }
  }

  a {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 2;

    @if $background-media-unmute-button-custom-image {
      background-image: image-url("pageflow/themes/#{$theme-name}/background_media_unmute_button.svg");
      background-size: $background-media-unmute-button-size
                         $background-media-unmute-button-size;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    } @else {
      position: relative;
      @include background-icon-center($color: $background-media-unmute-button-icon-color,
                                      $font-size: $background-media-unmute-button-icon-size);
      @include fa-volume-down-icon;

      &:after {
        content: "";
        display: block;
        position: absolute;
        width: 25px;
        left: 22px;
        top: 22px;
        border-top: solid 2px $background-media-unmute-button-icon-color;
        border-bottom: solid 1px $background-media-unmute-button-color;
        @include transform(translate(-50%, -50%) rotate(45deg));
      }
    }
  }
}