@use '../base' as *;

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

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

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

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

.btn {
  background: var(--color-bg-dark);
  color: var(--color-contrast-higher);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  @include fontSmooth;
  will-change: transform;

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

.btn--link {
  @include reset;
  color: inherit;
  cursor: pointer;
  text-decoration: none;

  &:hover {
    color: var(--color-primary);
  }
}

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

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

.btn--subtle {
  background: var(--color-bg-light);
  color: var(--color-contrast-higher);
  box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), var(--shadow-xs);

  &:hover {
    background: var(--color-bg-lighter);
    box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), var(--shadow-sm);
  }

  &:focus {
    box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), 0px 0px 0px 2px alpha(var(--color-contrast-higher), 0.05);
  }
}

.btn--accent {
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), var(--shadow-xs);

  &:hover {
    background: var(--color-accent-light);
    box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), var(--shadow-sm);
  }

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

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

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

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

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

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

// (END) Global editor code

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