:where(:root) {
  --button-line-height: 1rem;
  --button-padding: 0.66rem 1.33rem;
  --button-border-radius: 0.25rem;
  --button-text-icon-gap: 0.5rem;

  --button-face: light-dark(var(--color-12), var(--color-1));
  --button-border: var(--button-face);
  --button-text: var(--canvas);
}

:where(.button, button, input[type="reset"], input[type="button"], input[type="submit"]):not(.icon-only) {
  appearance: none;
  text-decoration: none;
  font-size: 100%;
  font-weight: 500;
  display: inline-block;
  line-height: var(--button-line-height);
  color: var(--button-text);
  background-color: var(--button-face);
  border: 1px solid var(--button-border);
  padding: var(--button-padding);
  cursor: pointer;
  transition: background-color 0.25s ease-in-out;
  border-radius: var(--button-border-radius);

  &.outline {
    background-color: transparent;
    color: var(--button-border);
    &:hover {
      background-color: inherit;
      color: var(--color-8);
      border-color: var(--color-8);
    }
    &:active,
    &[disabled] {
      background-color: oklch(from var(--color-1) l c h / 7.5%);
      color: var(--color-6);
      border-color: var(--color-6);
    }
  }

  &.with-icon {
    display: inline-flex;
    gap: 0 var(--button-text-icon-gap);
    svg.icon.lucide * {
      stroke-width: 2px;
      margin-bottom: initial;
    }
  }

  /* states for default buttons  */
  &[disabled] {
    background-color: light-dark(var(--color-4), var(--color-5));
    border-color: light-dark(var(--color-4), var(--color-5));
    color: light-dark(var(--color-2), var(--color-3));
    pointer-events: none !important;
  }

  &:hover {
    background-color: light-dark(var(--color-6), var(--color-8));
    border-color: light-dark(var(--color-6), var(--color-8));
    color: var(--button-text);
    text-decoration: none !important;
  }

  &:active {
    background-color: light-dark(var(--color-6), var(--color-8));
    border-color: light-dark(var(--color-6), var(--color-8));
    color: var(--button-text);
    position: relative;
    top: 1px;
    left: 1px;
  }

  &:focus-visible {
    background-color: light-dark(var(--color-6), var(--color-8));
    border-color: light-dark(var(--color-6), var(--color-8));
    color: var(--button-text);
  }

  /* states for secondary buttons  */
  &.secondary {
    background-color: var(--color-7);
    border-color: var(--color-7);
    color: var(--color-1);

    &:hover {
      background-color: var(--color-4);
      border-color: var(--color-4);
      color: var(--color-2);
    }

    &:active {
      background-color: var(--color-4);
      border-color: var(--color-4);
      color: var(--color-2);
    }

    &:focus-visible {
      background-color: var(--color-4);
      border-color: var(--color-4);
      color: var(--color-2);
    }
  }
  /* states for positive buttons  */
  &.positive {
    background-color: var(--color-dark-green);
    border-color: var(--color-dark-green);
    color: var(--color-1);

    &[disabled] {
      background-color: var(--color-dimmed-dark-green);
      border-color: var(--color-dimmed-dark-green);
      color: var(--color-4);
    }
    &:hover,
    &:active,
    &:focus-visible {
      background-color: var(--color-green);
      border-color: var(--color-green);
      color: var(--color-2);
    }
    &.outline {
      background-color: transparent;
      color: light-dark(var(--color-dark-green), var(--color-green));
      border-color: light-dark(var(--color-dark-green), var(--color-green));
      &:hover {
        background-color: inherit;
        color: var(--color-green);
        border-color: var(--color-green);
      }
      &:active {
        background-color: oklch(from var(--color-dark-green) l c h / 7.5%);
        color: light-dark(var(--color-dark-green), var(--color-dimmed-dark-green));
        border-color: light-dark(var(--color-dark-green), var(--color-dimmed-dark-green));
      }
    }
  }

  /* states for negative buttons  */
  &.negative {
    background-color: var(--color-dark-red);
    border-color: var(--color-dark-red);
    color: var(--color-1);

    &[disabled] {
      background-color: var(--color-dimmed-dark-red);
      border-color: var(--color-dimmed-dark-red);
      color: var(--color-4);
    }

    &:hover,
    &:active,
    &:focus-visible {
      background-color: var(--color-red);
      border-color: var(--color-red);
      color: var(--color-2);
    }

    &.outline {
      background-color: transparent;
      color: var(--color-red);
      border-color: var(--color-red);
      &:hover {
        background-color: inherit;
        color: var(--color-red);
        border-color: var(--color-red);
      }

      &:active {
        background-color: oklch(from var(--color-dark-red) l c h / 7.5%);
        color: light-dark(var(--color-dark-red), var(--color-dimmed-dark-red));
        border-color: light-dark(var(--color-dark-red), var(--color-dimmed-dark-red));
      }
    }
  }
}

:where(.icon-only) {
  appearance: none;
  border: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  background-color: transparent;
  cursor: pointer;
  svg * {
    stroke: var(--canvas-text);
    stroke-width: 1px;
    &:hover {
      stroke-width: 2px;
      opacity: 0.6;
    }
    &:focus-within,
    &:active {
      opacity: 0.6;
    }
  }
}

/* for the input[type=file] button */
[type="file"]::file-selector-button {
  appearance: none;
  text-decoration: none;
  font-size: 100%;
  font-weight: 500;
  display: inline-block;
  line-height: var(--button-line-height);
  background-color: var(--color-7);
  border-color: var(--color-7);
  border-style: solid;
  color: var(--color-1);
  padding: var(--button-padding);
  cursor: pointer;
  transition: background-color 0.25s ease-in-out;
  border-radius: var(--button-border-radius);
}

/* states for default buttons  */
[type="file"]::file-selector-button[disabled] {
  background-color: light-dark(var(--color-4), var(--color-5));
  border-color: light-dark(var(--color-4), var(--color-5));
  color: light-dark(var(--color-2), var(--color-3));
  pointer-events: none !important;
}

[type="file"]::file-selector-button:hover {
  background-color: var(--color-4);
  border-color: var(--color-4);
  color: var(--color-2);
}

[type="file"]::file-selector-button:active {
  background-color: var(--color-4);
  border-color: var(--color-4);
  color: var(--color-2);
}

[type="file"]::file-selector-button:focus-visible {
  background-color: var(--color-4);
  border-color: var(--color-4);
  color: var(--color-2);
}