@mixin button-styles(
  $background-color,
  $color,
  $border-radius: 4px,
  $border-color: transparent,
  $apply-hover: true,
  $hover-background: null,
  $hover-color: $color
) {
  background-color: $background-color;
  color: $color;
  border-radius: $border-radius;
  border: 1px solid $border-color;

  @if $apply-hover {
    &:hover {
      background-color: $hover-background;
      color: $hover-color;
    }
  }
}

.button {
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-family: pretendard;
  line-height: 1px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;

  // [action] 공통 스타일
  @mixin base-action {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    height: 36px;
  }

  // ------------------------------------- SIZE --------------------------------------

  // Delete(icon)
  &--xs {
    @include base-action;
  }

  // Details, Edit
  &--sm {
    height: 30px;
    padding: 0.5rem 1rem;
  }

  // Close, Confirm, Process, Cancel
  &--md {
    height: 33px;
    min-width: 100px;
    padding: 0.5rem 1rem;
  }

  // Add, Delete, Change, Reset
  &--lg {
    @include base-action;
    min-width: 74px;
  }

  // ------------------------------------- SIZE --------------------------------------

  // ------------------------------------- STYLE -------------------------------------

  // Details, Edit
  &--rounded {
    @include button-styles(#fff, #7e84a3, 4px, #a1a7c4, #fff, #6c757d, #fff);
  }

  // Confirm
  &--confirm {
    @include button-styles(#fec702, #fff, 50px, null, true, #fdde6d, #fff);
  }

  // Process
  &--process {
    @include button-styles(#fec702, #fff, 4px, null, true, #fdde6d, #fff);
  }

  // Close, Cancel
  &--close {
    @include button-styles(#fff, #858c97, 50px, #c2cad4, false);
  }

  // Add, Reset, Change, Delete
  &--action {
    @include button-styles(#fff, #7e84a3, 4px, #d5d7e3, false);
  }

  &[disabled] {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
  }
}

// ------------------------------------- STYLE -------------------------------------