$title-loading-spinner-typography: () !default;

$title-loading-spinner-title-typography: () !default;

$title-loading-spinner-phone-title-typography: () !default;

$title-loading-spinner-subtitle-typography: () !default;

$title-loading-spinner-phone-subtitle-typography: () !default;

.media_loading_spinner {

  &-fade {
    .media_loading_spinner-titles {
      @include animation(title_fade $media-loading-spinner-duration ease-out 1);
      @include animation-fill-mode(forwards);
    }
  }

  &-titles {
    @include standard-typography(
      $title-loading-spinner-typography,
      (
        text-align: center
      )
    );
    position: absolute;
    top: 40%;
    left: 50%;
    width: 100%;
    padding: 1em;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #fff;
    opacity: 0;
  }

  &-title {
    &:after {
      content: "";
      display: block;
      width: 100px;
      border-bottom: solid 2px;
      margin: 20px auto;
    }

    @include typography(
      $title-loading-spinner-title-typography,
      (
        font-weight: bold,
        font-size: 5.3em
      )
    );

    @include phone {
      &:after {
        border-bottom-width: 1px;
      }

      @include typography(
        $title-loading-spinner-phone-title-typography,
        (
          font-size: 2em
        )
      );
    }
  }

  &-subtitle {
    @include typography(
      $title-loading-spinner-subtitle-typography,
      (
        font-size: 1.5em,
      )
    );

    @include phone {
      @include typography(
        $title-loading-spinner-phone-subtitle-typography,
        (
          font-size: 1em
        )
      );
    }
  }
  
  @include keyframes(title_fade) {
    0% {
      @include transform(translate(-50%, -30%));
      opacity: 0;
    }

    20% {
      @include transform(translate(-50%, -30%));
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    60% {
      @include transform(translate(-50%, -50%));
    }

    70% {
      @include transform(translate(-50%, -50%));
      opacity: 1;
    }

    100% {
      @include transform(translate(-50%, -50%));
      opacity: 0;
    }
  }

}