Scoreline: Live Score

.scoreline {
  text-transform: uppercase;
  text-align: center;
  &__title {
    @include text-m;

    color: $blue;
    margin-bottom: 0.8rem;
  }
  &__tournament-name {
    @include text-s;

    color: $red;
    margin-bottom: 0.8rem;
  }
  &__location {
    @include text-xs;

    color: $color-interface-light;
    margin-bottom: 1.1rem;

    span + span::before {
      content: '●';
      padding-right: 0.8rem;
      margin-left: 0.8rem;
      font-size: 0.8rem;
    }
  }
  &__results {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  &__team-crests {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      max-width: 7rem;
      max-height: 7rem;
    }
  }
  &__team-goals {
    margin-top: 1rem;
    &--scored {
      span {
        font-family: $heading-font;
        font-size: 4.8rem;
        line-height: 3.4rem;
        letter-spacing: 0.01em;
        color: $white;
        padding: 1.5rem;
        background-color: $blue;
        min-width: 6rem;
        height: 6.6rem;
        display: inline-block;
        margin: 0 0.3rem;
        position: relative;
        &::after {
          content: '';
          display: block;
          width: 100%;
          height: 3.1rem;
          background: #fff;
          opacity: 0.05;
          min-width: 6rem;
          position: absolute;
          left: 0;
          bottom: 0;
        }
      }
    }
    &--live-score span {
      background-color: $blue-accent;
    }
    &--time {
      @include text-xs;

      color: $black;
      font-weight: bold;
      margin-top: 1.7rem;
    }
    &--ft {
      display: block;
      margin-top: 5px;
    }
  }

  &__live {
    display: flex;
    justify-content: center;
    margin-bottom: 0.8rem;
    align-items: center;

    .circle-wrapper {
      display: flex;

      .pulsating-circle {
        position: relative;
        top: -2px;

        &::before {
          content: '';
          display: block;
          width: 2rem;
          height: 2rem;
          border-radius: 50%;
          background-color: rgba($bold-red, 1);
          animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1)
            infinite;
        }

        &::after {
          content: '';
          position: absolute;
          left: 30%;
          top: 30%;
          display: block;
          width: 0.8rem;
          height: 0.8rem;
          background-color: $bold-red;
          border-radius: 50%;
          animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s
            infinite;
        }
      }
    }

    span {
      @include text-m;

      &:last-child.minutes::after {
        content: "'";
      }
    }
    .minutes {
      font-weight: bold;
    }
  }

  &__final-result {
    @include text-xs;

    color: $black;
    font-weight: bold;
    text-transform: initial;
    margin-top: 0.8rem;
  }

  @media (max-width: $mq-medium) {
    max-width: 35.9rem;
    margin: 0 auto;

    &__title {
      width: 17.5rem;
      margin: 0 auto;
      margin-top: -4rem;
      background: $white;
      border-top-right-radius: 0.8rem;
      border-top-left-radius: 0.8rem;
      height: 4.2rem;
      padding-top: 1rem;
    }
  }

  @media (min-width: $mq-large) {
    &__team-crests {
      img {
        max-width: 13.2rem;
        max-height: 13.2rem;
      }
    }
    &__team-goals {
      &--scored {
        span {
          font-size: 6.8rem;
          line-height: 4.8rem;
          min-width: 6.9rem;
          height: 8.1rem;
          &::after {
            height: 4rem;
          }
        }
      }
    }
  }
}

// Pulsating circle animation.
@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }
  80%,
  100% {
    opacity: 0;
  }
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}