@use "../base/mixins" as *;
@use "../base/variables" as *;

// dark theme
[data-theme="dark"] {
  // Primary 버튼 (기본 + size variants)
  @include btn-variant(
    $name: "primary",
    $bg: theme-color($primary),
    $line: theme-color($primary),
    $color: theme-color($text-mid),
    $hover-bg: #0ee597,
    $hover-line: #0ee597
  );

  // Gradient button
  @include btn-variant(
    $name: "gradient",
    $bg:
      linear-gradient(
        to right,
        theme-color($primary) 0%,
        #25b782 48%,
        theme-color($primary) 100%
      ),
    $line: transparent,
    $color: #ffffff
  );

  // Blur button
  @include btn-variant(
    $name: "blur",
    $bg: theme-color($border-low),
    $line: theme-color($container),
    $color: theme-color($text-low),
    $hover-bg: rgba(#f79b2b, 0.15),
    $hover-line: rgba(#f79b2b, 0.4),
    $hover-color: theme-color($text-high)
  );

  // Ghost button
  @include btn-variant(
    $name: "ghost",
    $bg: theme-color($invert-container),
    $line: theme-color($border-low),
    $color: theme-color($text-low),
    $hover-bg: theme-color($border-low)
  );

  @include btn-variant(
    $name: "ghost-light",
    $bg: rgba(#fff, 0.1),
    $line: rgba(#fff, 0.1),
    $color: theme-color($text-high)
  );

  @include btn-variant(
    $name: "danger",
    $bg:
      linear-gradient(
        to right,
        theme-color($secondary) 0%,
        #ce2b47 50%,
        theme-color($secondary) 100%
      ),
    $line: transparent,
    $color: #ffffff
  );

  // Ghost button에 그림자 추가
  .btn-ghost {
    // 안쪽 그림자 + 바깥쪽 그림자
    box-shadow: inset 0 0 8px theme-color($invert-container),
      0 8px 30px rgba(0, 0, 0, 0.45);
  }

  // Ghost button에 그림자 추가
  .btn-ghost-light {
    // 안쪽 그림자 + 바깥쪽 그림자
    box-shadow: inset 0 0 12px theme-color($invert-container),
      0 8px 30px rgba(0, 0, 0, 0.45);
  }

  // Blur button에 그림자 추가
  .btn-blur-wrap {
    // 안쪽 그림자 + 바깥쪽 그림자
    box-shadow: inset 0 0 14px theme-color($invert-container),
      0 8px 30px rgba(0, 0, 0, 0.45);
  }

  // Blur button disabled 스타일
  .btn-blur.btn-disabled,
  .btn-blur:disabled {
    background-color: theme-color($border-low);
    border-color: theme-color($container);

    &:hover {
      background-color: theme-color($border-low);
      border-color: theme-color($container);
    }
  }
}

// light theme
[data-theme="light"] {
  // Primary 버튼 (기본 + size variants)
  @include btn-variant(
    $name: "primary",
    $bg: theme-color($primary),
    $line: theme-color($primary),
    $color: theme-color($text-mid),
    $hover-bg: #00b472,
    $hover-line: #00b472
  );

  // Gradient button
  @include btn-variant(
    $name: "gradient",
    $bg:
      linear-gradient(
        to right,
        #04ca82 0%,
        theme-color($primary) 48%,
        #04ca82 100%
      ),
    $line: transparent,
    $color: #ffffff
  );

  // Blur button
  @include btn-variant(
    $name: "blur",
    $bg: rgba(#fff, 0.8),
    $line: #fff,
    $color: #666666,
    $hover-bg: rgba(#f79b2b, 0.36),
    $hover-line: rgba(#f79b2b, 0.4),
    $hover-color: theme-color($text-high)
  );

  // Ghost button
  @include btn-variant(
    $name: "ghost",
    $bg: rgba(#fff, 0.32),
    $line: #fff,
    $color: theme-color($text-low),
    $hover-bg: #fff
  );

  @include btn-variant(
    $name: "ghost-light",
    $bg: rgba(#fff, 0.56),
    $line: rgba(#fff, 1),
    $color: theme-color($text-high)
  );

  @include btn-variant(
    $name: "danger",
    $bg:
      linear-gradient(
        to right,
        theme-color($secondary) 0%,
        #ff4868 50%,
        theme-color($secondary) 100%
      ),
    $line: transparent,
    $color: #ffffff
  );

  // Ghost button에 그림자 추가
  .btn-ghost-light {
    // 안쪽 그림자 + 바깥쪽 그림자
    box-shadow: inset 0 0 12px rgba(#fff, 0.04), 0 8px 24px rgba(#000, 0.12);
  }

  .btn-blur-wrap {
    box-shadow: 0 8px 24px rgba(#000, 0.08);
  }
}

// Gray button
@include btn-variant(
  $name: "gray",
  $bg: theme-color($btn-bg),
  $line: transparent,
  $color: theme-color($btn-line)
);

.btn-blur {
  backdrop-filter: blur(25px);
}

.btn-blur-wrap {
  overflow: hidden;
  position: relative;
  border-radius: 0.6rem;

  &:has(.btn-lg, .btn-md) {
    border-radius: 0.8rem;
  }

  &:has(.btn-blur:not(:disabled))::before {
    @include hidden();
    @include transition(all);

    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 25%;
    width: 9rem;
    height: 2rem;
    background: #f79b2b;
    border-radius: 100%;
  }

  &:has(.btn-blur:not(:disabled):hover)::before {
    @include hidden(1, visible);
  }
}

.btn-block {
  width: 100% !important;
}