/* =========================================
   BUTTON BASE
========================================= */

.button {
    min-height: var(--button-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: 0.125em 0;
    padding-inline: clamp(18px, 16px + 0.5vw, 24px);
    border: 0;
    border-radius: 0;
    color: #fff;
    background: var(--color-secondary);
    font-weight: 600;
    letter-spacing: .5px;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    font-size: var(--font-body);
    line-height: 100%;
}

.button:hover {
    background: var(--green-dark);
    color: white;
}

.button,
.button:hover,
.button:focus,
.button:active {
    text-decoration: none;
}

.button-primary {
    color: var(--white);
    background: var(--color-secondary);
    border: 2px solid var(--color-secondary);
}

.button-primary:hover {
    color: var(--white);
    background: var(--green-dark);
    border-color: var(--green-dark);
}

.button-secondary {
    color: var(--color-secondary);
    background: transparent;
    border: 2px solid var(--color-secondary);
}

.button-secondary:hover {
    color: var(--white);
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

.button-outline-white,
.auth-panel .button-secondary {
    color: var(--white);
    background: transparent;
    border: 2px solid var(--white);
}

.button-outline-white:hover,
.auth-panel .button-secondary:hover {
    color: var(--purple);
    background: var(--white);
    border-color: var(--white);
}



/* =========================================
   BUTTON ICONS
========================================= */

.btn svg,
.btn .icon {
  display: block;      /* prevents inline clipping issues */
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  overflow: visible; /* prevents macOS/Safari clipping, best to fix svg file */
}


/* =========================================
   BUTTON STATES
========================================= */

/* Don’t “lift” disabled buttons/links */
.btn:not(:disabled):not(.disabled):hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn:not(:disabled):not(.disabled):active {
  transform: translateY(0);
}

/* Accessible focus that matches your system */
.btn:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

/* Disabled support for both <button disabled> and <a class="disabled"> */
.btn:disabled,
.btn.disabled {
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none; /* prevents clicks on <a> */
}


/* =========================================
   PRIMARY BUTTON
========================================= */

.btn-primary {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
}


/* =========================================
   SECONDARY BUTTON
========================================= */

.btn-secondary {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.btn-secondary:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  text-decoration: none;
}


/* =========================================
   OUTLINE BUTTON
========================================= */

.btn-outline-primary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline-primary:hover {
  background: var(--color-primary);
  color: var(--color-white);
}


/* =========================================
   BUTTON SIZES
========================================= */

.btn-sm {
  padding: .4rem .8rem;
  font-size: .875rem;
}

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


/* =========================================
   FULL WIDTH BUTTON
========================================= */

.btn.w-100 {
  width: 100%;
}

@media (max-width: 767.98px) {
    .button {
        width: 100%;
    }
}