@use './mixins/mixins.scss' as *;

@mixin shadow {
  &::before {
    content: ' ';
    display: block;
    background: inherit;
    filter: blur(5px);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 5px;
    left: 5px;
    z-index: -1;
    opacity: 0.4;
    transform-origin: 0 0;
    border-radius: inherit;
    transform: scale(1, 1);
  }
}

@mixin bg-image($url) {
  &::after {
    content: ' ';
    position: absolute;
    z-index: inherit;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: inherit;
    opacity: 1;
    transform: scale(1, 1);
    background-size: 100% 100%;
    background-image: url(#{$url});
  }
}

@include b(cool-icon) {
  position: relative;
  display: inline-block;
  width: 100rpx;
  height: 100rpx;
  font-size: calc(100rpx * 0.6);

  @include e(bg) {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: 9;
  }

  @include e(icon) {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    line-height: 1;
    z-index: 10;
    border-radius: inherit;
  }

  /* 新拟态 start */
  @include m(mimic) {
    border-radius: 50%;
    box-shadow:
      0px 10px 30px rgba(70, 23, 129, 0.12),
      0px -8px 40px white,
      inset 0px -10px 10px rgba(70, 23, 129, 0.05),
      inset 0px 10px 20px white;
  }
  /* 新拟态 end */

  /* 正圆 start */
  @include m(circle) {
    border-radius: 50%;

    @include e(bg) {
      @include shadow;

      @include bg-image(
        'https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png'
      );
    }
  }
  /* 正圆 end */

  /* 椭圆 start */
  @include m(oval) {
    border-radius: 43% 57% 43% 57% / 57% 43% 57% 43%;

    @include e(bg) {
      transform: rotate(-19deg);

      @include shadow;

      @include bg-image(
        'https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png'
      );
    }
  }
  /* 椭圆 end */

  /* 圆角矩形 start */
  @include m(square) {
    border-radius: 25%;

    @include e(bg) {
      @include shadow;

      @include bg-image(
        'https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png'
      );
    }
  }
  /* 圆角矩形 end */

  /* 三角形 start */
  @include m(triangle) {
    border-radius: 68% 32% 40% 60% / 44% 34% 66% 56%;

    @include e(bg) {
      @include shadow;

      @include bg-image(
        'https://resource.tuniaokj.com/images/cool_bg_image/icon_bg3.png'
      );
    }
  }
  /* 三角形 end */

  /* 胶囊 start */
  @include m(capsule) {
    @include e(bg) {
      @include shadow;

      @include bg-image(
        'https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png'
      );
    }
  }
  /* 胶囊 end */

  /* 暗黑金边 start */
  @include m(dark-goldborder) {
    border-radius: 50%;
    @include e(bg) {
      @include bg-image(
        'https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png'
      );
    }
  }
  /* 暗黑金边 end */

  /* 花花 start */
  @include m(flower) {
    @include e(bg) {
      transform-origin: center center;
      transform: rotate(90deg);
      &::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        border-radius: inherit;
        transform-origin: center center;
        transform: rotate(60deg);
        opacity: 0.8;
      }
      &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        border-radius: inherit;
        transform-origin: center center;
        transform: rotate(-60deg);
        opacity: 0.8;
      }
    }
  }
  /* 花花 end */
}