@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.250, 0.460, 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 */