@import '../styles/theme.scss';
@import '../Typography/Typography.scss';

@mixin wave($width: 24px, $height: 24px, $color: white, $radius: 50%, $animation: wave-animate) {
  position: absolute;
  content: '';
  display: block;
  width: $width;
  height: $height;
  background: $color;
  border-radius: $radius;
  -webkit-backface-visibility: hidden;
  animation: $animation 2s infinite ease-out;
}

.trends {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: #{$spacingUnit}px #{$spacingUnit}px;

  &.small {
    .item {
      &.active {
        .dot {
          &::before {
            @include wave(12px, 12px);
          }
        }
        .line {
          &::before {
            @include wave(3px, 100%, white, 0px, wave-x-animate);
          }
        }
      }
      .dot {
        width: 12px;
        height: 12px;
        margin-top: 8px;
        margin-bottom: 8px;
      }
      .line {
        width: 2px;
      }
    }
  }

  &.large {
    .item {
      &.active {
        .dot {
          &::before {
            @include wave(24px, 24px);
          }
        }
        .line {
          &::before {
            @include wave(10px, 100%, white, 0px, wave-x-animate);
          }
        }
      }
      .dot {
        width: 24px;
        height: 24px;
        margin-top: 8px;
        margin-bottom: 8px;
      }
      .line {
        width: 10px;
      }
    }
  }

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    &.active {
      .dot {
        &::before {
          @include wave(16px, 16px);
        }
      }
      .line {
        &::before {
          @include wave(6px, 100%, white, 0px, wave-x-animate);
        }
      }
    }

    .dot {
      background: rgba(255, 255, 255, 0.2);
      width: 16px;
      height: 16px;
      margin-top: 8px;
      margin-bottom: 8px;
      border-radius: 50%;
      position: relative;
    }

    .line {
      width: 6px;
      position: relative;
    }

    .row {
      display: flex;
      align-items: baseline;
      justify-content: center;
    }

    .text-top {
      margin: #{$spacingUnit}px #{$spacingUnit}px 0px #{$spacingUnit}px;
    }
    .text-bottom {
      margin: 0px #{$spacingUnit}px 0px #{$spacingUnit}px;
    }

    .value,
    .title {
      font-size: 24px;

      .prefix,
      .suffix {
        font-size: 16px;
        padding-left: 4px;
        padding-right: 4px;
      }
    }
    .value {
      @extend .typography, .body1;
    }
    .title {
      @extend .typography, .body2;
    }
  }

  @keyframes wave-animate {
    0% {
      transform: scale(0);
      opacity: 1;
      transform-origin: center;
    }
    100% {
      transform: scale(3);
      opacity: 0;
      transform-origin: center;
    }
  }
  @keyframes wave-x-animate {
    0% {
      transform: scaleX(0);
      opacity: 1;
      transform-origin: center;
    }
    100% {
      transform: scaleX(3);
      opacity: 0;
      transform-origin: center;
    }
  }
}