/* ==================================================
   TEKO REDESIGN BUTTONS
================================================== */

.teko-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--teko-button-gap-10px);
  width: 312px;
  min-height: var(--teko-button-height-56px);
  padding: var(--teko-button-padding-y-16px) var(--teko-button-padding-x-24px);
  border: 1px solid transparent;
  border-radius: var(--teko-button-radius-4px);

  font-family: var(--teko-label-1-font-family);
  font-size: var(--teko-label-1-font-size-16px);
  line-height: var(--teko-label-1-line-height-22px);
  font-weight: var(--teko-weight-medium);
  letter-spacing: var(--teko-label-1-letter-spacing-minus-018px);

  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;

  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    opacity 0.2s ease;
}

.teko-btn:hover,
.teko-btn:focus,
.teko-btn:active {
  text-decoration: none;
  box-shadow: none;
  outline: none;
}

.teko-btn:active {
  transform: translateY(1px);
}

.teko-btn:focus-visible {
  outline: 2px solid var(--teko-brown-400);
  outline-offset: 3px;
}

/* Filled white */

.teko-btn--filled-light {
  border-color: var(--teko-neutral-0);
  background: var(--teko-neutral-0);
  color: var(--teko-neutral-1000);
}

.teko-btn--filled-light:hover,
.teko-btn--filled-light:focus {
  border-color: var(--teko-neutral-200);
  background: var(--teko-neutral-200);
  color: var(--teko-neutral-1000);
}

.teko-btn--filled-light:active {
  border-color: var(--teko-neutral-300);
  background: var(--teko-neutral-300);
  color: var(--teko-neutral-1000);
}

/* Outline white */

.teko-btn--outline-light {
  border-color: var(--teko-neutral-0);
  background: transparent;
  color: var(--teko-neutral-0);
}

.teko-btn--outline-light:hover,
.teko-btn--outline-light:focus {
  border-color: var(--teko-neutral-0);
  background: rgba(255, 255, 255, 0.1);
  color: var(--teko-neutral-0);
}

.teko-btn--outline-light:active {
  border-color: var(--teko-neutral-0);
  background: rgba(255, 255, 255, 0.18);
  color: var(--teko-neutral-0);
}

/* Filled brown */

.teko-btn--filled-brown {
  border-color: var(--teko-brown-400);
  background: var(--teko-brown-400);
  color: var(--teko-neutral-0);
}

.teko-btn--filled-brown:hover,
.teko-btn--filled-brown:focus {
  border-color: var(--teko-brown-500);
  background: var(--teko-brown-500);
  color: var(--teko-neutral-0);
}

.teko-btn--filled-brown:active {
  border-color: var(--teko-brown-700);
  background: var(--teko-brown-700);
  color: var(--teko-neutral-0);
}

/* Outline dark */

.teko-btn--outline-dark {
  border-color: var(--teko-neutral-1000);
  background: transparent;
  color: var(--teko-neutral-1000);
}

.teko-btn--outline-dark:hover,
.teko-btn--outline-dark:focus {
  border-color: var(--teko-neutral-1000);
  background: var(--teko-neutral-1000);
  color: var(--teko-neutral-0);
}

.teko-btn--outline-dark:active {
  border-color: var(--teko-neutral-700);
  background: var(--teko-neutral-700);
  color: var(--teko-neutral-0);
}

/* Text / arrow button */

.teko-btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--teko-button-gap-10px);

  font-family: var(--teko-label-1-font-family);
  font-size: var(--teko-label-1-font-size-16px);
  line-height: var(--teko-label-1-line-height-22px);
  font-weight: var(--teko-weight-medium);
  letter-spacing: var(--teko-label-1-letter-spacing-minus-018px);

  color: var(--teko-brown-400);
  text-decoration: none;
  cursor: pointer;

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.teko-btn-link:hover,
.teko-btn-link:focus {
  color: var(--teko-brown-500);
  text-decoration: none;
}

.teko-btn-link:active {
  color: var(--teko-brown-700);
}

.teko-btn-link__icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}

.teko-btn-link:hover .teko-btn-link__icon {
  transform: translateX(3px);
}

/* Disabled */

.teko-btn.is-disabled,
.teko-btn:disabled,
.teko-btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .teko-btn {
    width: 100%;
  }
}