@use '../base' as *;

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

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

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

:root {
  --btn-font-size: 1rem;
  --btn-padding-x: var(--space-xs);
  --btn-padding-y: var(--space-xxxs);
  --btn-radius: 5px;
}

.btn {
  background: var(--color-bg-dark);
  color: var(--color-contrast-higher);
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 400;
  text-decoration: none;
  line-height: 0.8;
  @include fontSmooth;
  outline: none;

  &:hover {
    background: var(--color-bg-darker);
  }

  &:focus {
    outline: 1px solid var(--color-contrast-lower);
  }
}

// themes
.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);

  &:hover {
    background: var(--color-primary-light);
    box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 2px alpha(var(--color-primary-darker), 0.25), 0px 1px 4px alpha(var(--color-primary-darker), 0.1), 0px 3px 6px -2px alpha(var(--color-primary-darker), 0.25);
  }
}

.btn--subtle {
  background: var(--color-bg-lighter);
  color: var(--color-contrast-higher);

  &:hover {
    background: var(--color-bg-light);
  }
}

.btn--accent {
  background: var(--color-accent);
  color: var(--color-white);

  &:hover {
    background: var(--color-accent-light);
    box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 2px alpha(var(--color-accent-darker), 0.25), 0px 1px 4px alpha(var(--color-accent-darker), 0.1), 0px 3px 6px -2px alpha(var(--color-accent-darker), 0.1);
  }
}

// feedback
.btn--disabled, .btn[disabled], .btn[readonly] {
  opacity: 0.6;
  cursor: not-allowed;
}

// size
.btn--sm {
  font-size: 0.8rem;
}

.btn--md {
  font-size: 1.2rem;
}

.btn--lg {
  font-size: 1.4rem;
}

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

// (END) Global editor code

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