@property --gradient-stop-pos-1 {
  syntax: "<length> | <percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --gradient-stop-pos-2 {
  syntax: "<length> | <percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --gradient-stop-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: #000;
}
@property --gradient-stop-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: #000;
}
@property --button-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #000;
}
.boral-button {
  --button-color: #fff;
  --button-background: transparent;
  --button-inline-padding: 0rem;
  --button-block-padding: 0rem;
  --border-radius: 0.25rem;
  --button-gap: 0.875rem;
  --button-text-weight: 400;
  --border-size: 1px;
  --border-color: transparent;

  --icon-color: var(--button-color);

  --gradient-stop-1: var(--primary-color, #00a94f);
  --gradient-stop-2: var(--primary-color, #00a94f);
  --gradient-stop-pos-1: 0%;
  --gradient-stop-pos-2: 100%;
  --background-gradient: linear-gradient(90deg, var(--gradient-stop-1) var(--gradient-stop-pos-1), var(--gradient-stop-2) var(--gradient-stop-pos-2));

  display: inline-flex;
  align-items: center;
  padding-block: var(--button-block-padding);
  padding-inline: var(--button-inline-padding);
  border-radius: var(--border-radius);
  background: var(--button-background);
  cursor: pointer;
  color: var(--button-color);
  gap: var(--button-gap);
  font-weight: var(--button-text-weight);
  text-decoration: none;
  min-width: -moz-max-content;
  min-width: max-content;
  margin-block: var(--size-9);
  border: var(--border-size) solid var(--border-color);
  justify-content: center;
}
.boral-button:hover {
    color: var(--button-color);
  }
@media (width > 64rem) {
.boral-button {
    padding-block: 0.75rem;
    padding-inline: 1.5rem
}
  }
.boral-button[data-size="small"]:not([data-variant="text"]) {
      --button-block-padding: 0.75rem;
      --button-inline-padding: 1.5rem;
    }
.boral-button[data-size="large"]:not([data-variant="text"]) {
      --button-inline-padding: 1.875rem;
      --button-block-padding: 1.125rem;
    }
.boral-button[data-variant="primary"],
  .boral-button[data-variant="default"],
  .boral-button[data-variant="solid"] {
    --button-text-weight: 600;
    --button-background: var(--button-bg-color);
    --button-color: var(--button-text-color);
  }
.boral-button[data-variant="primary"]:hover, .boral-button[data-variant="default"]:hover, .boral-button[data-variant="solid"]:hover {
      --button-background: transparent;
      --button-color: var(--button-bg-color);
      --border-color: var(--button-bg-color);
    }
.boral-button[data-variant="primary"]:active, .boral-button[data-variant="default"]:active, .boral-button[data-variant="solid"]:active {
      --gradient-stop-pos-1: 33%;
      --gradient-stop-pos-2: 100%;
    }
.boral-button[data-variant="secondary"] {
    --button-background: var(--secondary-color-80, #b8d861);
  }
.boral-button[data-variant="text"] {
    --button-color: var(--button-bg-color);
    --border-size: 0px;
  }
.boral-button[data-variant="text"] .icon {
      transition: translate 300ms cubic-bezier(0.19, 1, 0.22, 1);
    }
.boral-button[data-variant="text"]:hover .icon {
        translate: 0.25rem;
      }
.boral-button[data-icon-position="left"] {
    flex-direction: row-reverse;
  }
.boral-button[data-icon="true"] .icon {
      transition: translate 300ms cubic-bezier(0.19, 1, 0.22, 1);
      font-size: 1.25em;
      font-variation-settings: "wght" 400;
      will-change: translate;
    }
.boral-button[data-icon="true"]:hover .icon {
        translate: 0.25rem;
      }
.boral-button[data-alignment="center"] {
    justify-self: center;
  }
.boral-button[data-alignment="right"] {
    justify-self: flex-end;
  }
.boral-button[data-alignment="left"] {
    justify-self: flex-start;
  }
.boral-button[data-alignment="stretch"] {
    justify-self: stretch;
  }
.boral-button[data-rounded="true"] {
    border-radius: 9999px;
  }
.boral-button .icon {
    color: var(--icon-color);
  }