@mixin theme($property, $variable) {
  $theme: (
    "dialer_text_color": #ffb400,
    "dialer_prize_font_size": 12px,
    "dialer_prize_name_padding": 8px,
    "dialer_prize_inner_padding": 8px,
    "dialer_prize_image_size": 36px,
  );

  $value: map-get($theme, $variable);
  #{$property}: $value;

  /* #ifndef APP-IOS || APP-ANDROID */
  $css-variable: var(--#{$variable}, #{$value});
  #{$property}: #{$css-variable};
  /* #endif */
}

.l-dialer {
  position: relative;

  &__inner {
    width: 100%;
    height: 100%;
    flex: 1;
    position: relative;
    @include theme("color", "dialer_text_color");
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    border-radius: 999px;
    overflow: hidden;
    // transition: transform 3s ease;
    // transform-origin: 50% 50%;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.455, 0.995);
    &-border {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
    }

    &-wrap {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      border-radius: 999px;
      overflow: hidden;
      box-sizing: border-box;
      // background: red;
      /* #ifndef APP-ANDROID */
      &::after {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        content: "";
        border-radius: 50%;
        box-shadow: 0 0 20rpx currentColor inset;
      }
      /* #endif */
    }

    &-item {
      overflow: hidden;
      position: absolute;
      top: -50%;
      left: 50%;
      width: 100%;
      height: 100%;
      transform-origin: 0 100%;
    }

    &-content {
      position: absolute;
      @include theme("padding-top", "dialer_prize_inner_padding");
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      left: -50%;
      bottom: -50%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    &-name {
      @include theme("padding-top", "dialer_prize_name_padding");
      @include theme("padding-bottom", "dialer_prize_name_padding");
      @include theme("font-size", "dialer_prize_font_size");
      @include theme("color", "dialer_text_color");
    }

    &-img {
      @include theme("width", "dialer_prize_image_size");
      @include theme("height", "dialer_prize_image_size");
    }
  }

  &__pointer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
}

/* #ifndef APP-IOS || APP-ANDROID */
.heart {
  animation: heart 1s infinite;
}

@keyframes heart {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.03);
  }
  to {
    transform: scale(1);
  }
}
/* #endif */