_buttons.scss

components/_buttons.scss

@use "../abstracts/" as *;

@layer reset {
  button {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
  }
}  // @layer reset end

@layer default {
  // add more classes if necessary
  button.submit,
  button.primary,
  button.accent,
  button.outline {
    @include button;
    transition: background-color 0.5s ease-in-out,
                color 0.5s ease-in-out;
    &:hover {
      --button-bg: #{$color-neutral-800};
      --button-color: #{$color-neutral-100};
      transition: background-color 0.5s ease-in-out,
      color 0.5s ease-in-out;
    }
    &:active {
      transform: scale(0.97);
    }
  }
} // @layer default end

@layer theme {
  button.submit {
    // --button-bg: #{$color-primary-100};
    // --button-color: #{$color-primary-800};
    &:hover {
      // --button-bg: #{$color-primary-700};
      // --button-color: #{$color-primary-100};
    }
  }
  // button.primary {
  //   --button-bg: #{$color-primary-100};
  //   --button-color: #{$color-primary-800};
  //   &:hover {
  //     --button-bg: #{$color-primary-700};
  //     --button-color: #{$color-primary-100};
  //   }
  // }
  // button.accent {
  //   --button-bg: #{$color-accent-100};
  //   --button-color: #{$color-accent-800};
  //   &:hover {
  //     --button-bg: #{$color-accent-700};
  //     --button-color: #{$color-accent-100};
  //   }
  // }
  // button.outline {
  //   --button-bg: #{$button-outline-bg};
  //   --button-color: #{$button-outline-color};
  //   outline: $button-outline-size solid $button-outline-color;
  //   outline-offset: calc($button-outline-size * -1);
  //   &:hover {
  //     --button-bg: #{$button-outline-bg};
  //     --button-color: #{$button-outline-color};
  //   }
  // }
} // @layer theme end