pussy-ts/src/pages/teleport/mainScreen/components/Logo/Logo.module.scss

.container {
  display: flex;

  width: 100%;
  justify-content: center;

}

@mixin ion-light {
  width: 150px;
  height: 39px;
  filter: blur(25px);
  position: absolute;
}

@mixin background-gradient($deg) {
  background: linear-gradient($deg, rgba(0, 0, 0, 0) 3.92%, rgba(0, 0, 0, 0) 3.93%, rgba(255, 217, 0, 0.15) 86.49%, rgba(255, 217, 0, 0.15) 99.97%);
}

$transform-rotate: rotate(-45deg);

@mixin pseudo-element($element) {
  &:#{$element} {
    content: "";
    @include ion-light;

    @if ($element =='before') {
      top: 100%;
      right: 100%;
      transform: translate(50%, 0%) $transform-rotate;
      @include background-gradient(90deg);
    }

    @else {
      top: 0%;
      left: 100%;
      transform: translate(-50%, -50%) $transform-rotate;
      @include background-gradient(-90deg);
    }
  }

}

.teleportLogo {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(images/teleport-logo-angled.png);

  @include pseudo-element('before');
  @include pseudo-element('after');
}

// content: "";
// width: 150px;
// height: 130px;
// position: absolute;
// border: 1px solid;
// border-radius: 50%;
// transform: perspective(220px) rotateX(35deg) rotateY(255deg);
// opacity: 0.5;