@use "../utilities/mixins" as *;
@use "../utilities/colors" as *;

button,
.button {
  --bkg : var(--app);
  --text: var(--on-app);
  --bkg-hover: var(--surface);
  --bkg-active: var(--surface);
  --radius: 0.25em;
  --shadow: var(--border);

  display: inline-flex;
  background: var(--bkg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5em 0.75em;
  text-decoration: none;

  cursor: pointer;
  transition: var(--tx-m);

  &:hover {
    background: var(--bkg-hover);
    box-shadow: 0 0.25em 0.5em var(--shadow);
  }

  &:active {
    --shadow: var(--bkg-active);
    background: var(--bkg-active);
    box-shadow: 0 0 0.25em var(--shadow);
  }

  &.-cta {
    --bkg: var(--primary);
    --text: var(--on-primary);
    --border: var(--primary);
    --radius: 1.5em;
    --bkg-hover: var(--primary-hover);
    --bkg-active: var(--primary-active);
    --shadow: rgba(#{toRGB($primary)}, .8);
  }

  &.-link {
    --bkg: transparent;
    --border: transparent;
    --bkg-hover: transparent;
    --bkg-active: transparent;

    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-underline-offset: .25em;
    text-decoration-thickness: 2px;

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

  }
}
