---
const { style } = Astro.props;
---

<style lang="scss">
@use '../../public/styles/var' as *;

.btn {
  box-sizing: border-box;
  margin-top: 2px;
  margin-bottom: 2px;
  display: inline-block;
  padding: 0.6em 1em 0.4em;
  line-height: 1;
  font-weight: bold;
  font-size: 1.3em;
  font-family: inherit;
  letter-spacing: -0.025em;
  font-family: 'Overpass', sans-serif;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  background-color: #fefefe;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: transform 100ms cubic-bezier(0.7, 0, 0.84, 0), box-shadow 100ms linear, border-color 40ms linear;

  &:hover,
  &:focus {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-color: #bbb;
    transform: translateY(-1px);
  }

  &:focus {
    border-color: #00f;
  }

  &__primary {
    color: #fff;
    background: linear-gradient(45deg, $rainbow-green, $rainbow-blue, $rainbow-purple);
    border-color: $rainbow-blue;

    &:hover {
      border-color: $rainbow-blue;
    }
  }
}
</style>

<span class={`btn${style ? ` btn__${style}`: ''}`}><slot /></span>