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

@bg-gradient-1: #407099;
@bg-gradient-2: #032c5c;
@border-gradient-1: #5799d1;
@border-gradient-2: #032c5c;
@text-color: #fff;
@arrow-color: #5799d1;
@arrow-hover-color: #fff;
@icon-fill-color: #032c5c;
@icon-stroke-color: #fff;
@drop-shadow-fill: rgba(3, 44, 92, 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,
    #bg {
      filter: drop-shadow(1px 1px 2px @drop-shadow-fill);
    }

    #text2 {
      fill: @text-color;
    }

    #cc,
    #zero {
      fill: @icon-stroke-color;
    }

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

    // icon bg
    #bg {
      fill: @icon-fill-color;
    }

    #text1 {
      fill: @text-color;
    }
  }
}
