/**
 * Button component styles
 * Bootstrap 5 enhanced buttons
 */

/*BASE */

.btn {
  transition: all 0.3s ease !important;
  font-family: var(--ff-eyebrow) !important;
  font-weight: 500 !important;
  font-size: var(--fs-eyebrow) !important;
  line-height: var(--lh-eyebrow) !important;
  letter-spacing: 0.25em !important;
  position: relative;
  text-transform: uppercase !important;
}

.btn-xs{
  width: fit-content !important;
}

.btn-pure{
  position: relative !important;
  &::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    box-shadow: inset 0 0 0 2px var(--white) !important;
    transition: all 0.3s ease !important;
    background: url(../icon/icons/arrow-red.svg);
    background-repeat: no-repeat;
    background-position: right 25px center;
    background-size: 25px;
  }
}

[data-component-id="usfq_theme:icon"] {
  color: inherit !important;
}

.btn-primary {
  background-color: var(--dark) !important;
  color: var(--white) !important;
  border-radius: 61px !important;
  border: 2px solid var(--white) !important;
  text-transform: uppercase !important;
}

/* Hover */
.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--white) !important;
  color: var(--dark) !important;
  border-color: var(--dark) !important;
}

/* Focus */
.btn-primary:focus:not(:disabled):not([aria-disabled="true"]),
.btn-primary:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--dark) !important;
  color: var(--white) !important;
  border: 2px solid var(--white) !important;
  box-shadow: 0 0 0 4px rgba(225, 27, 34, 0.5) !important;
}

/*disabled*/
.btn:disabled:not(.is-loading),
.btn[aria-disabled="true"]:not(.is-loading) {
  background-color: var(--light-opacity-20) !important;
  color: var(--dark-opacity-20) !important;
  border: none !important;
  opacity: 0.65 !important;
  pointer-events: none !important;
}

/*loading state*/
.btn-primary.is-loading {
  pointer-events: none;
}

/* SPINNER */

.btn-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.8s linear infinite;
  margin-right: 0.5rem;
}


@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.btn-secondary {
  padding: 16px 32px !important;
  gap: 8px !important;
  border-radius: 61px !important;
  font-family: var(--ff-eyebrow) !important;
  font-weight: 500 !important;
  font-size: var(--fs-eyebrow) !important;
  line-height: var(--lh-eyebrow) !important;
  letter-spacing: 0.25em !important; /* 25% of font-size, per E1 spec */
  text-transform: uppercase !important;
}

/* TONOS CUSTOM */
/* TONO LIGHT */
.btn-secondary.btn--light {
  background: var(--white) !important;
  color: var(--secondary) !important;
  border: 2px solid #000 !important;
}

/* Hover btn-light */
.btn-secondary.btn--light:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--secondary) !important;
  color: var(--white) !important;
}

/* Focus btn-light */
.btn-secondary.btn--light:focus:not(:disabled):not([aria-disabled="true"]),
.btn-secondary.btn--light:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--white) !important;
  color: var(--dark) !important;
  border: 2px solid var(--secondary) !important;
  box-shadow: 0 0 0 4px rgba(225, 27, 34, 0.5) !important;
}

/* TONO  secondary */
.btn-secondary.btn--secondary {
  background: var(--secondary) !important;
  color: var(--white) !important;
  border: 2px solid var(--white) !important;
}

/* Hover btn-secondary */
.btn-secondary.btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--white) !important;
  color: var(--secondary) !important;
}

/* Focus btn-secondary */
.btn-secondary.btn--secondary:focus:not(:disabled):not([aria-disabled="true"]),
.btn-secondary.btn--secondary:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--secondary) !important;
  color: var(--white) !important;
  border: 2px solid var(--white) !important;
  box-shadow: 0 0 0 4px rgba(225, 27, 34, 0.5) !important;
}

/* TONO primary */
.btn.btn--primary {
  background: var(--primary) !important;
  color: var(--white) !important;
  border: 2px solid var(--white) !important;
}

/* Hover btn-primary */
.btn.btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--white) !important;
  color: var(--secondary) !important;
  border: 2px solid var(--secondary) !important;
}

/* Focus btn-primary */
.btn.btn--primary:focus:not(:disabled):not([aria-disabled="true"]),
.btn.btn--primary:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--primary) !important;
  color: var(--white) !important;
  border: 2px solid var(--white) !important;
  box-shadow: 0 0 0 4px rgba(225, 27, 34, 0.5) !important;
}

/* NONE */
.btn-hover-none:hover:not(:disabled):not([aria-disabled="true"]) {
  transform: none;
  box-shadow: none;
}

.btn-secondary.btn-pure {
  padding-right: calc(1em + 45px) !important;
}