/********************
  Style general des buttons
********************/
.btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.5rem;
  font-family     : var(--typo-primary);
  font-size       : var(--btn-font-size);
  font-weight     : var(--btn-font-weight);
  line-height     : 1.5;
  text-align      : center;
  text-decoration : none;
  vertical-align  : middle;
  cursor          : pointer;
  user-select     : none;
  border          : 2px solid transparent;
  padding         : var(--btn-padding-y) var(--btn-padding-x);
  border-radius   : var(--btn-radius);
  transition      : var(--btn-transition);
  white-space     : nowrap;
  margin-bottom   : 0;
}

.btn .material-icons {
  font-size   : 1.25em;
  line-height : 1;
}

/********************
  Part - btn status
********************/
a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events : none;
}

.btn:focus,
.btn:focus-visible {
  outline    : none;
  box-shadow : 0 0 0 3px rgba(var(--color-tertiary-base), 0.25);
}

.btn:hover {
  text-decoration : none;
}

.btn.disabled,
.btn:disabled {
  cursor         : not-allowed;
  opacity        : 0.5;
  pointer-events : none;
}

/********************
  Part - btn sizes
********************/
.btn-sm {
  font-size : 0.8125rem;
  padding   : 0.5rem 1rem;
}

.btn-lg {
  font-size : 1rem;
  padding   : 1rem 1.75rem;
}

.btn-xl {
  font-size : 1.125rem;
  padding   : 1.125rem 2rem;
}

.btn-icon {
  padding : 0.625rem;
  width   : 2.5rem;
  height  : 2.5rem;
}

.btn-icon.btn-sm {
  width   : 2rem;
  height  : 2rem;
  padding : 0.375rem;
}

.btn-icon.btn-lg {
  width   : 3rem;
  height  : 3rem;
  padding : 0.75rem;
}

/********************
  Part - btn primary (CTA / Accent)
********************/
.btn-primary {
  background-color : var(--btn-primary-bg-color);
  color            : var(--btn-primary-color);
  border-color     : var(--btn-primary-border-color);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color : var(--btn-primary-bg-color--is-hover);
  color            : var(--btn-primary-color--is-hover);
  border-color     : var(--btn-primary-border-color--is-hover);
}

.btn-primary:active {
  transform : translateY(1px);
}

/********************
  Part - btn secondary
********************/
.btn-secondary {
  background-color : var(--btn-secondary-bg-color);
  color            : var(--btn-secondary-color);
  border-color     : var(--btn-secondary-border-color);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color : var(--btn-secondary-bg-color--is-hover);
  color            : var(--btn-secondary-color--is-hover);
  border-color     : var(--btn-secondary-border-color--is-hover);
}

/********************
  Part - btn outline (accent border)
********************/
.btn-outline,
.btn-outline-primary {
  background-color : var(--btn-outline-bg-color);
  color            : var(--btn-outline-color);
  border-color     : var(--btn-outline-border-color);
}

.btn-outline:hover,
.btn-outline:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color : var(--btn-outline-bg-color--is-hover);
  color            : var(--btn-outline-color--is-hover);
  border-color     : var(--btn-outline-border-color--is-hover);
}

/********************
  Part - btn outline secondary (dark)
********************/
.btn-outline-secondary {
  background-color : transparent;
  color            : var(--color-secondary);
  border-color     : var(--color-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color : var(--color-secondary);
  color            : var(--color-white-default);
  border-color     : var(--color-secondary);
}

/********************
  Part - btn tertiary (light/muted)
********************/
.btn-tertiary {
  background-color : var(--color-grey-default);
  color            : var(--color-grey-font-default);
  border-color     : transparent;
  font-weight      : 500;
}

.btn-tertiary:hover,
.btn-tertiary:focus {
  background-color : #e5e7eb;
  color            : var(--color-black-default);
}

/********************
  Part - btn ghost (no bg, subtle hover)
********************/
.btn-ghost {
  background-color : transparent;
  color            : var(--color-grey-font-default);
  border-color     : transparent;
}

.btn-ghost:hover,
.btn-ghost:focus {
  background-color : var(--color-grey-default);
  color            : var(--color-black-default);
}

/********************
  Part - btn link
********************/
.btn-link {
  background-color      : transparent;
  color                 : var(--color-tertiary);
  border-color          : transparent;
  padding               : 0;
  font-weight           : 500;
  text-decoration       : underline;
  text-underline-offset : 2px;
}

.btn-link:hover,
.btn-link:focus {
  color           : var(--color-tertiary-60);
  text-decoration : underline;
}

/********************
  Part - btn unstyle
********************/
.btn-unstyle {
  background-color : transparent;
  border           : none;
  padding          : 0;
  font             : inherit;
  color            : inherit;
  text-align       : inherit;
  cursor           : pointer;
}

.btn-unstyle:focus {
  outline : none;
}

/********************
  Part - btn danger
********************/
.btn-danger {
  background-color : #ef4444;
  color            : var(--color-white-default);
  border-color     : #ef4444;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color : #dc2626;
  border-color     : #dc2626;
}

.btn-outline-danger {
  background-color : transparent;
  color            : #ef4444;
  border-color     : #ef4444;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color : #ef4444;
  color            : var(--color-white-default);
}

/********************
  Part - btn success
********************/
.btn-success {
  background-color : #22c55e;
  color            : var(--color-white-default);
  border-color     : #22c55e;
}

.btn-success:hover,
.btn-success:focus {
  background-color : #16a34a;
  border-color     : #16a34a;
}

.btn-outline-success {
  background-color : transparent;
  color            : #22c55e;
  border-color     : #22c55e;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color : #22c55e;
  color            : var(--color-white-default);
}

/********************
  Part - btn warning
********************/
.btn-warning {
  background-color : #f59e0b;
  color            : var(--color-white-default);
  border-color     : #f59e0b;
}

.btn-warning:hover,
.btn-warning:focus {
  background-color : #d97706;
  border-color     : #d97706;
}

.btn-outline-warning {
  background-color : transparent;
  color            : #f59e0b;
  border-color     : #f59e0b;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background-color : #f59e0b;
  color            : var(--color-white-default);
}

/********************
  Part - btn info
********************/
.btn-info {
  background-color : #3b82f6;
  color            : var(--color-white-default);
  border-color     : #3b82f6;
}

.btn-info:hover,
.btn-info:focus {
  background-color : #2563eb;
  border-color     : #2563eb;
}

.btn-outline-info {
  background-color : transparent;
  color            : #3b82f6;
  border-color     : #3b82f6;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
  background-color : #3b82f6;
  color            : var(--color-white-default);
}

/********************
  Part - btn pill (full rounded)
********************/
.btn-pill {
  border-radius : var(--radius-full);
}

/********************
  Part - btn block (full width)
********************/
.btn-block {
  display : flex;
  width   : 100%;
}

/********************
  Part - btn group
********************/
.btn-group {
  display : inline-flex;
}

.btn-group .btn {
  border-radius : 0;
}

.btn-group .btn:first-child {
  border-top-left-radius    : var(--btn-radius);
  border-bottom-left-radius : var(--btn-radius);
}

.btn-group .btn:last-child {
  border-top-right-radius    : var(--btn-radius);
  border-bottom-right-radius : var(--btn-radius);
}

.btn-group .btn:not(:last-child) {
  border-right-width : 1px;
}

/********************
  Part - quantity buttons (product page)
********************/
.qty-btn {
  display          : flex;
  align-items      : center;
  justify-content  : center;
  width            : 2.5rem;
  height           : 2.5rem;
  background-color : var(--color-grey-default);
  border           : 1px solid var(--input-border-color);
  border-radius    : var(--radius-sm);
  cursor           : pointer;
  transition       : var(--btn-transition);
  color            : var(--color-black-default);
}

.qty-btn:hover:not(:disabled) {
  background-color : #e5e7eb;
  border-color     : #9ca3af;
}

.qty-btn:disabled {
  opacity : 0.5;
  cursor  : not-allowed;
}

.qty-btn .material-icons {
  font-size : 1.125rem;
}