// ========== 颜色配置 ==========
$white: #fff;

// ========== Mixin 配置 ==========
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// ========== 样式定义 ==========
.div-btn {
  @include flex-center;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
  border: none;
  background: transparent;
  padding: 0.5em;
  border-radius: 4px;
  position: relative;

  // Default size (medium)
  .div-btn__icon {
    width: 1.5em;
    height: 1.5em;
  }

  &:hover:not(.div-btn--disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
  }

  &:active:not(.div-btn--disabled),
  &--pressed:not(.div-btn--disabled) {
    transform: scale(0.95);
  }

  &--disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &--rotate {
    &:hover:not(.div-btn--disabled) {
      transform: scale(1.05) rotate(var(--rotate-degrees, 180deg));
    }

    &:active:not(.div-btn--disabled),
    &--pressed:not(.div-btn--disabled) {
      transform: scale(0.95) rotate(360deg);
    }
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: $white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease;

    &--default {
      opacity: 1;
    }

    &--hover {
      opacity: 0;
    }

    &--pressed {
      opacity: 0;
    }

    &--disabled {
      opacity: 0;
    }
  }

  // Show hover icon on hover
  &:hover:not(.div-btn--disabled):not(.div-btn--pressed) {
    .div-btn__icon--default {
      opacity: 0;
    }
    .div-btn__icon--hover {
      opacity: 1;
    }
  }

  // Show pressed icon when pressed
  &:active:not(.div-btn--disabled),
  &--pressed:not(.div-btn--disabled) {
    .div-btn__icon--default,
    .div-btn__icon--hover {
      opacity: 0;
    }
    .div-btn__icon--pressed {
      opacity: 1;
    }
  }

  // Show disabled icon when disabled
  &--disabled {
    .div-btn__icon--default,
    .div-btn__icon--hover,
    .div-btn__icon--pressed {
      opacity: 0;
    }
    .div-btn__icon--disabled {
      opacity: 1;
    }
  }
}
