/* Base Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--Button-Fixed-Gap, .5rem);
  padding: calc(
      var(--Button-Vertical-Padding, 12px) - var(--Button-Border-Default, 1px)
    )
    calc(
      var(--Button-Horizontal-Padding, 24px) - var(--Button-Border-Default, 1px)
    );
  border: var(--Button-Border-Default, 1px) solid transparent;
  border-radius: var(--Radius-L);
  font: var(--Single-Line-Body-Base);
  min-width: var(--Button-Min-Width, 3rem);
  min-height: var(--Button-Min-Height, 1.5rem);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
  user-select: none;

  &.full-width {
    display: flex;
    max-width: var(--Button-Fixed-Max-Width, 250px);
    flex: 1 0 0;
  }
}
/* stylelint-disable no-descending-specificity */

/*
 * I apply the above rule because Button variant classes (e.g., .btn-primary,
 * .btn-accent, .btn-secondary) are mutually exclusive. With nesting (`& .icon`),
 * Stylelint expands selectors like `.btn-primary:hover .icon` and treats later
 * base rules as descending specificity. Since a button can't have multiple
 * variants at once, these warnings are false positives.
 */

/* Primary Variant */
.btn-primary {
  background-color: var(--Button-Primary-Default-Background);
  color: var(--Button-Primary-Default-Text);
  border: 0;
  padding: var(--Button-Vertical-Padding, 12px)
    var(--Button-Horizontal-Padding, 24px);
  border-color: var(--Button-Primary-Default-Border);

  & .icon {
    color: var(--Button-Primary-Default-Icon-Color);
  }

  /* Focus state */
  &:focus-visible,
  &:focus {
    outline: var(--Button-Border-Focused) solid
      var(--Button-Primary-Focused-Border-Focus);

    & .icon {
      color: var(--Button-Primary-Focused-Icon-Color);
    }
  }

  /* Disabled state */
  &:disabled,
  &.is-disabled,
  &[aria-disabled='true'] {
    background-color: var(--Button-Primary-Disabled-Background);
    color: var(--Button-Primary-Disabled-Text);
    cursor: not-allowed;
    border-color: var(--Button-Primary-Disabled-Border);

    & .icon {
      color: var(--Button-Primary-Disabled-Icon-Color);
    }
  }

  /* Hover state */
  &:hover:not(:disabled),
  .pseudo-hover-all & {
    background-color: var(--Button-Primary-Hover-Background);
    color: var(--Button-Primary-Hover-Text);
    border-color: var(--Button-Primary-Hover-Border);

    & .icon {
      color: var(--Button-Primary-Hover-Icon-Color);
    }
  }

  /* Pressed state */
  &:active:not(:disabled),
  .pseudo-active-all & {
    background-color: var(--Button-Primary-Pressed-Background);
    color: var(--Button-Primary-Pressed-Text);
    border-color: var(--Button-Primary-Pressed-Border);

    & .icon {
      color: var(--Button-Primary-Pressed-Icon-Color);
    }
  }
}

/* Accent */
.btn-accent {
  background-color: var(--Button-Accent-Default-Background);
  color: var(--Button-Accent-Default-Text);
  border-color: var(--Button-Accent-Default-Border);

  & .icon {
    color: var(--Button-Accent-Default-Icon-Color);
  }

  /* Focus state */
  &:focus-visible,
  &:focus {
    outline: var(--Button-Border-Focused) solid
      var(--Button-Accent-Focused-Border-Focus);

    & .icon {
      color: var(--Button-Accent-Focused-Icon);
    }
  }

  /* Disabled state */
  &:disabled,
  &.is-disabled,
  &[aria-disabled='true'] {
    background-color: var(--Button-Accent-Disabled-Background);
    color: var(--Button-Accent-Disabled-Text);
    border-color: var(--Button-Accent-Disabled-Border);
    cursor: not-allowed;

    & .icon {
      color: var(--Button-Accent-Disabled-Icon);
    }
  }

  /* Hover state */
  &:hover:not(:disabled),
  .pseudo-hover-all & {
    background-color: var(--Button-Accent-Hover-Background);
    color: var(--Button-Accent-Hover-Text);
    border-color: var(--Button-Accent-Hover-Border);

    & .icon {
      color: var(--Button-Accent-Hover-Icon-Color);
    }
  }

  /* Pressed state */
  &:active:not(:disabled),
  .pseudo-active-all & {
    background-color: var(--Button-Accent-Pressed-Background);
    color: var(--Button-Accent-Pressed-Text);
    border-color: var(--Button-Accent-Pressed-Border);

    & .icon {
      color: var(--Button-Accent-Pressed-Icon-Color);
    }
  }
}

/* Secondary */
.btn-secondary {
  background-color: var(--Button-Secondary-Default-Background);
  color: var(--Button-Secondary-Default-Text);
  border: var(--Button-Border-Default, 1px) solid
    var(--Button-Secondary-Default-Border, #001c35);

  & .icon {
    color: var(--Button-Secondary-Default-Icon);
  }

  /* Focus state */
  &:focus-visible,
  &:focus {
    outline: var(--Button-Border-Default) solid
      var(--Button-Secondary-Focused-Border-Default);

    & .icon {
      color: var(--Button-Secondary-Focused-Icon);
    }
  }

  /* Disabled state */
  &:disabled,
  &.is-disabled,
  &[aria-disabled='true'] {
    background-color: var(--Button-Secondary-Disabled-Background);
    color: var(--Button-Secondary-Disabled-Text);
    border-color: var(--Button-Secondary-Disabled-Border);
    cursor: not-allowed;

    & .icon {
      color: var(--Button-Secondary-Disabled-Icon);
    }
  }

  /* Hover state */
  &:hover:not(:disabled),
  .pseudo-hover-all & {
    background-color: var(--Button-Secondary-Hover-Background);
    color: var(--Button-Secondary-Hover-Text);
    border-color: var(--Button-Secondary-Hover-Border);

    & .icon {
      color: var(--Button-Secondary-Hover-Icon);
    }
  }

  /* Pressed state */
  &:active:not(:disabled),
  .pseudo-active-all & {
    background-color: var(--Button-Secondary-Pressed-Background);
    color: var(--Button-Secondary-Pressed-Text);
    border-color: var(--Button-Secondary-Pressed-Border);

    & .icon {
      color: var(--Button-Secondary-Pressed-Icon);
    }
  }
}
/* stylelint-enable no-descending-specificity */