/* Underline Button */
.underline-button {
  --underline-btn-text: var(--underline-btn-primary-text);
  --underline-btn-icon: var(--underline-btn-primary-icon);
  --underline-btn-border: var(--underline-btn-primary-border);
  --underline-btn-text-hover: var(--underline-btn-primary-text-hover);
  --underline-btn-icon-hover: var(--underline-btn-primary-icon-hover);
  --underline-btn-border-hover: var(--underline-btn-primary-border-hover);
  --underline-btn-text-disabled: var(--color-text-disabled-default);
  --underline-btn-border-disabled: var(--color-border-disabled-default);
  --underline-btn-focus-ring: var(--underline-btn-primary-focus-ring);
  --underline-btn-gap: var(--spacing-4);
  --underline-btn-padding-y: var(--spacing-8);
  --underline-btn-font-size: var(--btn-medium-font-size);
  --underline-btn-icon-size: var(--sizing-20);

  display: inline-flex;
  align-items: center;
  gap: var(--underline-btn-gap);
  border: none;
  background: transparent;
  padding-inline: 0;
  padding-block: var(--underline-btn-padding-y);
  font-weight: var(--font-weight-semibold, 600);
  font-family: var(--font-family-base);
  font-size: var(--underline-btn-font-size);
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  color: var(--underline-btn-text);
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}

.underline-button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--underline-btn-border);
  transition: background-color 0.2s ease;
}

.underline-button:hover:not(:disabled):not([aria-disabled='true']),
.underline-button:focus-visible {
  color: var(--underline-btn-text-hover);
}

.underline-button:hover:not(:disabled):not([aria-disabled='true'])::after,
.underline-button:focus-visible::after {
  background-color: var(--underline-btn-border-hover);
}

.underline-button:focus-visible {
  outline: 2px solid var(--underline-btn-focus-ring);
  outline-offset: 4px;
}

.underline-button:disabled,
.underline-button[aria-disabled='true'] {
  cursor: not-allowed;
  color: var(--underline-btn-text-disabled);
}

.underline-button-icon {
  width: var(--underline-btn-icon-size);
  height: var(--underline-btn-icon-size);
  flex-shrink: 0;
  color: var(--underline-btn-icon);
  display: inline-flex;
}

.underline-button-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}


.underline-button--primary {
  --underline-btn-text: var(--underline-btn-primary-text);
  --underline-btn-icon: var(--underline-btn-primary-icon);
  --underline-btn-border: var(--underline-btn-primary-border);
  --underline-btn-text-hover: var(--underline-btn-primary-text-hover);
  --underline-btn-icon-hover: var(--underline-btn-primary-icon-hover);
  --underline-btn-border-hover: var(--underline-btn-primary-border-hover);
  --underline-btn-focus-ring: var(--underline-btn-primary-focus-ring);
}

.underline-button--white {
  --underline-btn-text: var(--underline-btn-white-text);
  --underline-btn-icon: var(--underline-btn-white-icon);
  --underline-btn-border: var(--underline-btn-white-border);
  --underline-btn-text-hover: var(--underline-btn-white-text-hover);
  --underline-btn-icon-hover: var(--underline-btn-white-icon-hover);
  --underline-btn-border-hover: var(--underline-btn-white-border-hover);
  --underline-btn-focus-ring: var(--underline-btn-white-focus-ring);
}

.underline-button:disabled::after,
.underline-button[aria-disabled='true']::after {
  background-color: var(--underline-btn-border-disabled);
}

.underline-button:disabled .underline-button-icon,
.underline-button[aria-disabled='true'] .underline-button-icon {
  color: var(--underline-btn-text-disabled);
}

.underline-button:hover:not(:disabled):not([aria-disabled='true']) .underline-button-icon,
.underline-button:focus-visible .underline-button-icon {
  color: var(--underline-btn-icon-hover);
}