/*
  cta-button.css
  Styles for the cta_button macro (templates/macros/cta_button.html).

  Dark variant:  .cta--register, .cta--schedule, .cta--tickets-stay
  Light variant: .cta--choose-gm, .cta--explore, .cta--learn-more, .btn--explore
*/

.cta--register,
.cta--schedule,
.cta--tickets-stay,
.cta--choose-gm,
.cta--explore,
.cta--learn-more,
.btn--explore {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 240px;
  height: 44px;
  padding: 0 1rem;
  border-radius: 22px;
  font-size: 16px;
  font-family: var(--poppins);
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  overflow: hidden;

  @media screen and (min-width: 1024px) {
    padding: 0 40px;
    font-size: 18px;
    transition: all 125ms ease-in-out;
  }
}

/* Dark variant */
.cta--register,
.cta--schedule,
.cta--tickets-stay {
  border: 2px solid var(--emerald);
  background-color: var(--emerald);
  color: var(--linen);

  &:hover {
    background-color: var(--super-faded-gold);
    color: var(--emerald);
  }
}

/* Light variant */
.cta--choose-gm,
.cta--explore,
.cta--learn-more,
.btn--explore {
  border: 2px solid var(--emerald);
  background-color: var(--linen);
  color: var(--emerald);

  &:hover {
    background-color: var(--emerald);
    color: var(--super-faded-gold);
  }
}

/* Positional overrides */
.cta--choose-gm,
.cta--schedule,
.cta--tickets-stay {
  margin: 0 auto;
}

.cta--footer {
  margin-top: 20px;

  @media screen and (max-width: 600px) {
    margin: 20px auto 0;
  }
}

.cta--choose-gm {
  @media screen and (max-width: 600px) {
    letter-spacing: -0.01em;
  }
}

.cta.disabled {
  pointer-events: none;
  background-color: var(--ash);
  border-color: var(--ash);
  color: var(--linen);

  &:hover {
    background-color: var(--ash);
    border-color: var(--ash);
    color: var(--linen);
  }
}