:root {
  /* --- Primary Button Colors --- */
  --color-button-primary-bg-default: var(--color-bg-secondary);
  --color-button-primary-bg-hover: var(--color-bg-secondary-light);
  --color-button-primary-bg-disable: var(--color-bg-main-disable);

  --color-button-primary-text-default: var(--color-text-primary);
  --color-button-primary-text-disable: var(--color-text-disable);

  /* --- Icon Colors --- */
  --color-button-icon-default: var(--color-icon-primary);
  --color-button-icon-disable: var(--color-icon-disable);

  /* --- Button Dimensions Height--- */
  --btn-height-md: var(--size-control-lg);
  --btn-height-sm: var(--size-control-md);
  --btn-height-xs: var(--size-control-sm);

  /* --- Button Action Dimensions --- */
  --btn-action-height: var(--size-control-xs);
  --btn-action-width: var(--size-control-xs);

  /* --- Button Padding --- */
  --btn-padding-x-md: var(--padding-x-md);
  --btn-padding-x-sm: var(--padding-x-sm);
  --btn-padding-x-xs: var(--padding-x-xs);

  /* --- Button font size --- */
  --btn-font-size-body-md: var(--font-size-headline-desktop-md);
  --btn-font-size-body-sm: var(--font-size-headline-desktop-sm);
  --btn-font-size-md: var(--font-size-body-sm-emphasis);
  --btn-font-size-sm: var(--font-size-body-xs-emphasis);

  /* --- Border Radius  Button --- */
  --btn-border-radius: var(--border-radius-xs);
  --btn-spacing-md: var(--spacing-xs);
  --btn-spacing-xs: var(--spacing-xxs);

  /* --- Secondary Button Colors --- */
  --color-button-secondary-bg-default: var(--color-bg-main-secondary);
  --color-button-secondary-bg-hover: var(--color-bg-main-tertiary);
  --color-button-secondary-bg-disable: var(--color-bg-main-disable);

  --color-button-secondary-text-default: var(--color-text-primary);
  --color-button-secondary-text-disable: var(--color-text-disable);

  /* --- Ghost Button Colors --- */
  --color-button-ghost-bg-hover: var(--color-bg-main-secondary);
  --color-button-ghost-bg-disable: var(--color-bg-main-disable);

  --color-button-ghost-text-default: var(--color-text-primary);
  --color-button-ghost-text-hover: var(--color-text-primary);
  --color-button-ghost-text-disable: var(--color-text-disable);

  --color-button-ghost-icon-hover: var(--color-icon-primary);

  --color-button-ghost-error-bg-hover: var(--color-bg-error-light);
  --color-button-ghost-error-text-default: var(--color-text-error);
  --color-button-ghost-error-text-hover: var(--color-text-inverse);
  --color-button-ghost-error-icon-default: var(--color-icon-error);
  --color-button-ghost-error-icon-hover: var(--color-icon-inverse);

  /* --- Ghost Inverse Colors --- */
  --color-button-ghost-inverse-bg-hover: var(--color-bg-main);
  --color-button-ghost-inverse-bg-disable: var(--color-bg-main-disable);

  --color-button-ghost-inverse-text-default: var(--color-text-inverse);
  --color-button-ghost-inverse-text-hover: var(--color-text-primary);
  --color-button-ghost-inverse-text-disable: var(--color-text-disable);

  --color-button-ghost-inverse-icon-default: var(--color-icon-inverse);
  --color-button-ghost-inverse-icon-hover: var(--color-icon-primary);
  --color-button-ghost-inverse-icon-disable: var(--color-icon-disable);

  /* --- Link Colors --- */
  --color-link-text-default: var(--color-text-link);
  --color-link-text-hover: var(--color-text-primary);
  --color-link-text-disable: var(--color-text-disable);

  --color-link-icon-default: var(--color-icon-link);
  --color-link-icon-hover: var(--color-icon-primary);
  --color-link-icon-disable: var(--color-icon-disable);

  /* --- Link Inverse --- */
  --color-link-inverse-text-default: var(--color-text-inverse);
  --color-link-inverse-text-hover: var(--color-text-link);
  --color-link-inverse-text-disable: var(--color-text-disable);

  --color-link-inverse-icon-default: var(--color-icon-inverse);
  --color-link-inverse-icon-hover: var(--color-icon-link);
  --color-link-inverse-icon-disable: var(--color-icon-disable);

  /* --- Error Button Colors --- */
  --color-button-error-bg-default: var(--color-bg-error);
  --color-button-error-bg-hover: var(--color-bg-error-light);
  --color-button-error-text-default: var(--color-text-inverse);
  --color-button-error-text-hover: var(--color-text-inverse);

  /* --- Outlined Button Colors --- */
  --color-button-outlined-bg-hover: var(--color-bg-main-tertiary);
  --color-button-outlined-border-default: var(--color-border-primary);
  --color-button-outlined-border-disable: var(--color-border-neutral-secondary);
  --color-button-outlined-text-default: var(--color-text-primary);
  --color-button-outlined-text-disable: var(--color-text-disable);
  --color-button-outlined-icon-default: var(--color-icon-primary);
  --color-button-outlined-icon-disable: var(--color-icon-disable);

  /* --- Radio Buttons --- */
  --color-radio-button-text-default: var(--color-text-primary);
  --color-radio-button-text-disable: var(--color-text-disable);
  --color-radio-button-icon-default: var(--color-icon-primary);
  --color-radio-button-icon-disable: var(--color-icon-disable);

  --icon-size-radio: var(--icon-size-sm);
  --spacing-radio: var(--spacing-xxs);

  /* --- Action Button Colors --- */
  --color-primary-action-button-bg-default: var(--color-bg-primary);
  --color-primary-action-button-bg-hover: var(--color-bg-primary-light);
  --color-primary-action-button-bg-disable: var(--color-bg-main-disable);

  --color-secondary-action-button-bg-default: var(--color-bg-secondary);
  --color-secondary-action-button-bg-hover: var(--color-bg-secondary-light);
  --color-secondary-action-button-bg-disable: var(--color-bg-main-disable);

  --color-primary-action-button-icon-default: var(--color-icon-inverse);
  --color-primary-action-button-icon-hover: var(--color-icon-inverse);
  --color-primary-action-button-icon-disable: var(--color-icon-disable);

  --color-secondary-action-button-icon-default: var(--color-icon-primary);
  --color-secondary-action-button-icon-hover: var(--color-icon-primary);
  --color-secondary-action-button-icon-disable: var(--color-icon-disable);

  /* --- Tertiary Action Button Colors --- */
  --color-tertiary-action-button-bg-default: var(--color-bg-main);
  --color-tertiary-action-button-bg-hover: var(--color-bg-main-secondary);
  --color-tertiary-action-button-bg-disable: var(--color-bg-main-disable);

  --color-tertiary-action-button-icon-default: var(--color-icon-primary);
  --color-tertiary-action-button-icon-hover: var(--color-icon-primary);
  --color-tertiary-action-button-icon-disable: var(--color-icon-disable);

  --color-tertiary-action-button-border-default: var(--color-border-neutral);
  --color-tertiary-action-button-border-hover: var(--color-border-neutral);
  --color-tertiary-action-button-border-disable: var(--color-border-neutral);


  --height-action-button: var(--size-control-xs);
  --width-action-button: var(--size-control-xs);
  --icon-size-action-button: var(--icon-size-xs);

    
}


.btn-md {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height-md);
  padding: 0 var(--btn-padding-x-md);
  font-size: var(--btn-font-size-md);
  border-radius: var(--btn-border-radius);
  gap: var(--btn-spacing-md);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height-sm);
  padding: 0 var(--btn-padding-x-sm);
  font-size: var(--btn-font-size-sm);
  border-radius: var(--btn-border-radius);
  gap: var(--btn-spacing-md);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-xs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height-xs);
  padding: 0 var(--btn-padding-x-xs);
  font-size: var(--btn-font-size-sm);
  border-radius: var(--btn-border-radius);
  gap: var(--btn-spacing-xs);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.leading svg:first-child {
  margin-right: var(--btn-spacing-md);
}

.trailing svg:last-child {
  margin-left: var(--btn-spacing-md);
}

.btn-icon {
  height: var(--icon-size-sm);
  width: var(--icon-size-sm);
  justify-content: center;
}

.btn-icon svg path {
  fill: var(--color-button-icon-default);
}

.btn-icon:disabled svg path {
  fill: var(--color-button-icon-disable);
}

/* --- Primary Button Style */

.btn-primary {
  background-color: var(--color-button-primary-bg-default);
  color: var(--color-button-primary-text-default);
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
  background-color: var(--color-button-primary-bg-hover) !important;
  color: var(--color-button-primary-text-default) !important;
}

button.btn-primary:focus, 
button.btn-primary.focus,
.btn-primary:focus, .btn-primary.focus {
    outline: none !important;
    background-color: var(--color-button-primary-bg-hover) !important;
    color: var(--color-button-primary-text-default) !important;
    border-color: inherit !important;
    box-shadow: none !important;
}

.btn-primary:hover {
  background-color: var(--color-button-primary-bg-hover);
  color: var(--color-button-primary-text-default);
  border-color: inherit !important;
  box-shadow: none !important;
  text-decoration: none;
}

.btn-primary:disabled {
  background-color: var(--color-button-primary-bg-disable);
  color: var(--color-button-primary-text-disable);
  cursor: not-allowed;
}

/* --- Secondary Button Styles --- */
.btn-secondary {
  background-color: var(--color-button-secondary-bg-default);
  color: var(--color-button-secondary-text-default);
}

button.btn-secondary:focus, 
button.btn-secondary.focus {
    outline: none !important;
    background-color: var(--color-button-secondary-bg-hover) !important;
    color: var(--color-button-secondary-text-default) !important;
    border-color: var(--color-input-withlabel-border-default) !important;
    box-shadow: none !important;
}

.btn-secondary:hover {
  background-color: var(--color-button-secondary-bg-hover);
}

.btn-secondary:disabled {
  background-color: var(--color-button-secondary-bg-disable);
  color: var(--color-button-secondary-text-disable);
  cursor: not-allowed;
}

/* --- Ghost Button Styles --- */
.btn-ghost {
  background-color: transparent;
  color: var(--color-button-ghost-text-default);
}

.btn-ghost:hover,
.btn--ghost:focus  {
  background-color: var(--color-button-ghost-bg-hover);
  color: var(--color-button-ghost-text-hover);
}

.btn-ghost:disabled {
  background-color: var(--color-button-ghost-bg-disable);
  color: var(--color-button-ghost-text-disable);
  cursor: not-allowed;
}

/* --- Error Button Styles --- */

.btn-error {
  background-color: var(--color-button-error-bg-default);
  color: var(--color-button-error-text-default);
}

button.btn-error:focus, button.btn-error.focus {
  outline: none !important;
  background-color: var(--color-button-error-bg-hover) !important;
  color: var(--color-button-error-text-hover) !important;
  border-color: inherit !important;
  box-shadow: none !important;
}

.btn-error:hover {
  background-color: var(--color-button-error-bg-hover);
  color: var(--color-button-error-text-hover);
  box-shadow: none;
  border-color: inherit;
  text-decoration: none;
}

.btn-error:disabled {
  background-color: var(--color-button-secondary-bg-disable);
  color: var(--color-button-secondary-text-disable);
  cursor: not-allowed;
}

.btn-error svg path {
  fill: var(--color-button-error-icon-default);
}

.btn-error:hover svg path,
.btn-error:focus svg path {
  fill: var(--color-button-error-icon-hover);
}

/* --- Botón Ghost Error --- */
.btn-ghost-error {
  background-color: transparent;
  color: var(--color-button-ghost-error-text-default);
}

.btn-ghost-error:hover {
  background-color: var(--color-button-ghost-error-bg-hover);
  color: var(--color-button-ghost-error-text-hover);
}

.btn-ghost-error:disabled {
  background-color: var(--color-button-ghost-bg-disable);
  color: var(--color-button-ghost-text-disable);
  cursor: not-allowed;
}

.btn-ghost-error svg path {
  fill: var(--color-button-ghost-error-icon-default);
}

.btn-ghost-error:hover svg path {
  fill: var(--color-button-ghost-error-bg-hover);
}

/* --- Botón Outlined --- */
.btn-outlined {
  background-color: transparent;
  border: 1px solid var(--color-button-outlined-border-default);
  color: var(--color-button-outlined-text-default);
}

.btn-outlined:hover,
.btn-outlined:focus {
  background-color: var(--color-button-outlined-bg-hover);
  border-color: var(--color-button-outlined-border-default);
}

.btn-outlined:disabled {
  border-color: var(--color-button-outlined-border-disable);
  color: var(--color-button-outlined-text-disable);
  cursor: not-allowed;
}

.btn-outlined svg path {
  fill: var(--color-button-outlined-icon-default);
}

.btn-outlined:disabled svg path {
  fill: var(--color-button-outlined-icon-disable);
}

.btn-link {
  background-color: transparent;
  color: var(--color-link-text-default);
}

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

.btn-link:disabled {
  color: var(--color-link-text-disable);
  cursor: not-allowed;
}

.btn-link svg path {
  fill: var(--color-link-icon-default);
}

.btn-link:hover svg path {
  fill: var(--color-link-icon-hover);
}

.btn-link:disabled svg path {
  fill: var(--color-link-icon-disable);
}

.btn-link-inverse {
  background-color: transparent;
  color: var(--color-link-inverse-text-default);
}

.btn-link-inverse:hover,
.btn-link-inverse:focus {
  color: var(--color-link-inverse-text-hover);
}

.btn-link-inverse:disabled {
  color: var(--color-link-inverse-text-disable);
  cursor: not-allowed;
}

.btn-link-inverse svg path {
  fill: var(--color-link-inverse-icon-default);
}

.btn-link-inverse:hover svg path {
  fill: var(--color-link-inverse-icon-hover);
}

.btn-link-inverse:disabled svg path {
  fill: var(--color-link-inverse-icon-disable);
}

/* --- Radio Button Styles --- */
.radio-button {
  display: inline-flex;
  margin-right: var(--spacing-radio);
  align-items: center;
  cursor: pointer;
}

/* --- Action Button Styles --- */
.btn-primary-action {
  background-color: var(--color-primary-action-button-bg-default);
}

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

.btn-primary-action:disabled {
  background-color: var(--color-primary-action-button-bg-disable);
  cursor: not-allowed;
}

.btn-secondary-action {
  background-color: var(--color-secondary-action-button-bg-default);
}

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

.btn-secondary-action:disabled {
  background-color: var(--color-secondary-action-button-bg-disable);
  cursor: not-allowed;
}

.btn-tertiary-action {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-tertiary-action-button-bg-default);
  color: var(--color-tertiary-action-button-icon-default);
  height: var(--btn-action-height);
  width: var(--btn-action-width);
  border: 1px solid var(--color-tertiary-action-button-border-default);
  border-radius: 8px;
}

.btn-tertiary-action:hover,
.btn-tertiary-action:focus {
  background-color: var(--color-bg-tertiary-light);
}

.btn-tertiary-action:disabled {
  background-color: var(--color-bg-tertiary-disable);
  cursor: not-allowed;
}