// --------------------------------

// (START) Global Editor code https://codyhouse.co/ds/globals/buttons

// --------------------------------

:root{
  --btn-font-size: 1em;
  --btn-font-size-sm: 0.8em;
  --btn-font-size-md: 1.2em;
  --btn-font-size-lg: 1.8em;
  --btn-padding-x: var(--space-md);
  --btn-padding-y: var(--space-xs);
  --btn-radius: 0.2em;
}

.btn {
  cursor: pointer;
  font-family: var(--font-primary);
  text-decoration: none;
  line-height: 1;
  @include fontSmooth;
  box-shadow: 0px 1px 1px  alpha(var(--color-black), 0.1), 0px 4px 10px  alpha(var(--color-black), 0.1);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0px 1px 1px  alpha(var(--color-black), 0.05), 0px 1px 4px  alpha(var(--color-black), 0.1);
  }

  &:focus {
    box-shadow: 0px 0px 0px 2px alpha(var(--color-black), 0.2);
    outline: none;
  }

  &:active {
    transform: translateY(2px);
  }
}

// themes
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0px 1px 1px  alpha(var(--color-primary-dark), 0.2), 0px 4px 10px  alpha(var(--color-primary-dark), 0.2);

  &:hover {
    background-color: var(--color-primary-dark);
    box-shadow: 0px 1px 1px  alpha(var(--color-primary-dark), 0.15), 0px 1px 4px  alpha(var(--color-primary-dark), 0.15);
  }

  &:focus {
    box-shadow: 0px 0px 0px 2px alpha(var(--color-primary), 0.2);
  }
}

.btn--subtle {
  background-color: var(--color-contrast-lower);
  color: var(--color-contrast-higher);
}

.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-white);
  box-shadow: 0px 1px 1px  alpha(var(--color-accent-dark), 0.2), 0px 4px 10px  alpha(var(--color-accent-dark), 0.2);

  &:hover {
    background-color: var(--color-accent-dark);
    box-shadow: 0px 1px 1px  alpha(var(--color-accent-dark), 0.15), 0px 1px 4px  alpha(var(--color-accent-dark), 0.15);
  }

  &:focus {
    box-shadow: 0px 0px 0px 2px alpha(var(--color-accent), 0.2);
  }
}

.btn--contrast {
  background-color: alpha(var(--color-contrast-higher), 0.96);
  color: var(--color-bg);
}

.btn--bg {
  background-color: alpha(var(--color-bg), 0.96);
  color: var(--color-contrast-higher);
}

// feedback
.btn--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.btn--lg {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

// --------------------------------

// (END) Global Editor Code

// --------------------------------