.button--play {
  align-items: center;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;

  .icon {
    color: returnColorCSSVar('brand-tertiary');
  }
}

// viewport s - m
@include viewport--l('inversed') {
  .button--play .icon {
    height: $icon-size--xxl;
    width: $icon-size--xxl;
  }
}

// viewport l
@include viewport--l {
  .button--play {
    &:hover .icon {
      @include animation-pulse('pulse-large', 1, 1.05);
      animation: pulse-large 1s infinite ease-out;
    }
    // disable animation for touch devices
    @include hover-touch {
      .icon {
        animation: none;
      }
    }
  }
}