@import 'themes/global-variables.less';
@import 'ng-zorro-antd/style/color/colors.less';

@keyframes rotate-star {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@banner-bg-color: #13091a;
.banner {
  width: 100%;
  overflow: hidden;
  border-radius: @border-radius-md;
  height: 75px;
  border: 1px solid transparent;
  background:
    radial-gradient(circle 500px at 50px 25px, #5b2e63, #3a1f40) padding-box,
    linear-gradient(170deg, #8c5d86, #481951) border-box;

  svg {
    height: 75px;
    width: auto;
    position: relative;
    top: -1px;
    left: -635px;

    #text {
      filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6));
    }

    #star {
      transform-origin: 673.5px 41.56px; // Center star shapes
      animation: rotate-star 270s linear infinite;
    }

    // star1
    #star1 {
      fill: url(#radial-gradient);
    }

    #star2 {
      fill: url(#radial-gradient1);
    }

    // text1
    #text1 {
      fill: #fff;
    }

    // text2
    #text2 {
      fill: #fff;
    }

    // icon
    #icon {
      fill: #481951;
      stroke: #fff;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.5px;
    }

    // star2
  }
}
