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

@bg-gradient-1: #2cb352;
@bg-gradient-2: #1d5225;
@border-gradient-1: #8fc795;
@border-gradient-2: #0f2912;
@text-color: #fff;
@arrow-color: #4dc95f;
@arrow-hover-color: #fff;
@icon-fill-color: #1d5225;
@icon-stroke-color: #fff;
@drop-shadow-fill: rgba(29, 82, 37, 0.6);
.banner {
  width: 100%;
  overflow: hidden;
  border-radius: @border-radius-md;
  height: 75px;
  border: 1px solid transparent;
  background:
    radial-gradient(circle 300px at 50px 25px, @bg-gradient-1, @bg-gradient-2)
      padding-box,
    linear-gradient(176deg, @border-gradient-1, @border-gradient-2) border-box;

  &:hover {
    svg {
      #arrow {
        fill: @arrow-hover-color;
      }
    }
  }

  svg {
    height: 75px;
    width: auto;
    top: -1px;

    #text1,
    #text2 {
      fill: @text-color;
      filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.4));
    }

    #arrow {
      fill: @arrow-color;
      fill-rule: evenodd;
    }

    #icon {
      #bg {
        fill: @icon-fill-color;
        stroke: @icon-stroke-color;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.5px;
        filter: drop-shadow(1px 1px 2px @drop-shadow-fill);
      }

      #outline {
        fill: @icon-stroke-color;
      }
    }
  }
}
