/**
 * G1 Interface
 */

$g1-color: #a80000;
$g1-color-2: #bf170a;
$g1-color-gray: #3d3d3f;

$top-margin: 5.8%;
$side-margin: 4.8%;

.g1 {
  $prefix: &;

  &__interface {
    @extend %full-screen;
    position: relative;
    overflow: hidden;
    & > * {
      position: absolute;
    }
    animation: ani-fade-in 0.4s ease-in-out;
  }

  &__left-hash {
    top: $top-margin;
    left: $side-margin;
    font-size: 1.4em;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #bababa;

    @include securePreAnimation() {
      animation: ani-fade-in-left 0.4s ease-in-out 0.41s;
      transform: translateX(-20px);
      opacity: 0;
    }
  }

  &__bottom-block {
    left: 5%;
    bottom: 4%;
    width: 90%;
    text-transform: uppercase;
    // for testings

    font-family: 'Roboto Condensed', sans-serif;

    #{$prefix} {
      &__subtitle {
        font-family: 'Roboto', sans-serif;
        display: inline-block;
        padding: 0px 10px;
        background: #ddd;
        font-size: 1.45em;
        padding-left: 2.5%;
        font-weight: 800;
        letter-spacing: -0.05em;
        @include securePreAnimation() {
          animation: ani-fade-in-left 0.3s ease-in-out 1s;
          transform: translateX(-20px);
          opacity: 0;
        }
      }
      &__title {
        clear: both;
        font-size: 2.2em;
        letter-spacing: -0.05em;
        color: #fff;
        padding: 0.6em;
        padding-left: 2.5%;
        background-color: rgba(33, 33, 33, 0.9);
      }
    }
  }

  &__footer {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    background-color: $g1-color;
    color: white;
    height: 30px;

    #{$prefix} {
      &__icon {
        @extend %flex-center;
        max-width: 45px;
        flex: 0 0 45px;
        border-right: 2px solid white;
        flex-grow: 1;
        img {
          max-width: 26px;
        }
      }
      &__marquee {
        @extend %flex-center;
        justify-content: start;

        overflow: hidden;
        font-size: 1.4em;
        flex: 1;
        &-inner {
          padding: 0 10px;
          white-space: nowrap;
          @include animation('marquee', '20s linear infinite') {
            0% {
              transform: translateX(100%);
            }
            50% {
              transform: translateX(0%);
            }
            100% {
              transform: translateX(-100%);
            }
          }
          &:hover {
            animation-play-state: paused;
          }
        }
      }
      &__time {
        @extend %flex-center;
        font-size: 1.4em;
        background-color: #000;
        padding: 0 15px;
        letter-spacing: -0.03em;
      }
    }
  }
  // End Footer

  // Top Right
  &__top-right {
    top: $top-margin;
    right: $side-margin;

    #{$prefix} {
      // Urgent
      &__urgent {
        @extend %flex-center;
        text-transform: uppercase;
        justify-content: flex-end;
        span {
          display: block;
        }
        animation: ani-fade-in-right 0.5s ease-in-out;
      }
      &__globo-icon {
        max-width: 2.5em;
        flex: 0 0 2.5em;
        transform: translate(0.35em, 0px);
      }
      &__text {
        font-weight: 500;
        background-color: $g1-color-2;
        color: #fff;
        font-size: 1.6em;
        letter-spacing: 0.06em;
        padding: 0.1em 0.5em;
      }
      &__news-icon {
        width: 7.5em;
        transform: translate(-2px, 0px);
      }
      // End Urgent

      // GloboNews Icon
      &__globonews-icon {
        width: 12em;
        animation: ani-fade-in-right 0.5s ease-in-out;
      }
      // End GloboNews Icon
      // Live Block
      &__live-block {
        position: absolute;
        top: 3.5em;
        right: 0;
        overflow: hidden;

        #{$prefix} {
          &__header {
            text-transform: uppercase;
            font-size: 1.07em;
            font-weight: 700;
            color: #fff;
            min-width: 8em;
            text-align: center;
            overflow: hidden;
            position: relative;
            span {
              display: block;
              background-color: $g1-color-2;
              width: 100%;
              height: 100%;
            }
            &:before,
            &:after {
              display: none;
              position: absolute;
              top: 0px;
              width: 50%;
              height: 100%;
              background-color: #fff;
              content: ' ';
            }
            &:before {
              left: 0;
              transform: translateX(-101%) scaleX(1);
            }
            &:after {
              right: 0;
              transform: translateX(101%) scaleX(1);
            }
          }
          &__location {
            overflow: hidden;
            background-color: $g1-color-gray;
            text-align: center;
            color: #fff;
            font-size: 1.1em;
            font-weight: 400;
            line-height: 1.4em;
          }
        }
      }
      // End Live Block
    }
  }

  // Animations
  // Top Right
  $top-animation-time: 0.8s;
  $top-header-delay: 0.3s;

  $top-anim-hide-set: $top-animation-time + ' ease-in-out forwards';
  $top-anim-hide-set-del: $top-animation-time + ' ease-in-out  ' +
    $top-header-delay + ' forwards';

  $top-anim-show-set: '1s' + ' cubic-bezier(0.49,-0.2, 0.25, 1)';

  // Top Right - show
  &__top-right {
    #{$prefix} {
      &__live-block {
        #{$prefix}__header {
          // header text
          span {
            @include animation('show-live-header-text', $top-anim-show-set) {
              0% {
                transform: translateY(-105%) scaleX(0.02);
                color: transparent;
              }
              40% {
                transform: scaleX(0.02) skewX(-30deg);
                color: transparent;
              }
              100% {
                transform: skewX(0deg) translateY(0%) scaleX(1);
              }
            }
          }
          &:before,
          &:after {
            display: block;
          }
          &:before {
            @include animation(
              'show-live-header-left',
              '.8s ease-in-out forwards'
            ) {
              0% {
                transform: translateX(48%) scale(0, 0);
                height: 0%;
              }
              29% {
                transform: translateX(45%) scale(0.01, 1);
                height: 100%;
              }
              95% {
                transform: translate(-101%, 0%) scale(1, 1);
                height: 100%;
              }
            }
          }
          &:after {
            @include animation(
              'show-live-header-right',
              '.8s ease-in-out forwards'
            ) {
              0% {
                transform: translateX(-48%) scale(0, 0);
                height: 0%;
              }
              29% {
                transform: translateX(-45%) scale(0.01, 1);
                height: 100%;
              }
              95% {
                transform: translate(101%, 0%) scale(1, 1);
                height: 100%;
              }
            }
          }
        } // End __header

        // location
        #{$prefix}__location {
          @include animation('show-live-location', '.3s ease-in-out 1s') {
            from {
              transform: translateY(20%);
              opacity: 0;
            }
            to {
              transform: translateY(0%);
              opacity: 1;
            }
          }
          @include securePreAnimation() {
            transform: translateY(20%);
            opacity: 0;
          }
        }
      } // End __location
    }
  }

  // Top Right - hidden
  &__top-right.hidden-animation {
    #{$prefix}__live-block {
      // Animation Header Location
      #{$prefix} {
        &__header {
          @include animation('hidden-live-header', $top-anim-hide-set) {
            to {
              transform: skewX(-20deg);
            }
          }
          span {
            @include animation('hidden-live-header-text', $top-anim-hide-set) {
              30% {
                color: transparent;
                transform: scaleX(1);
              }
              100% {
                transform: scaleX(0);
                color: transparent;
              }
            }
          }
          &:before,
          &:after {
            display: block;
          }
          &:before {
            @include animation(
              'hidden-live-header-left',
              $top-anim-hide-set-del
            ) {
              to {
                transform: translateX(52%) scaleX(0);
              }
            }
          }
          &:after {
            @include animation(
              'hidden-live-header-right',
              $top-anim-hide-set-del
            ) {
              to {
                transform: translateX(-52%) scaleX(0);
              }
            }
          }
        }
        // Animation Location
        &__location {
          @include animation('hidden-live-location', $top-anim-hide-set) {
            0% {
              transform: none;
            }
            100% {
              transform: skewX(-30deg) translateX(200%);
            }
          }
          span {
            display: block;
            @include animation(
              'hidden-live-location-text',
              $top-anim-hide-set
            ) {
              0% {
                opacity: 1;
                transform: none;
              }
              100% {
                transform: skewX(30deg) translateX(-200%);
                opacity: 0;
              }
            }
          }
          @include securePreAnimation() {
            opacity: 1;
            transform: none;
          }
        }
      }
    }
  }
}
