.a-button
  +button-base

  // color
  &.is-primary
    +button-color($primary)
  &.is-secondary
    +button-color($secondary)
    &.is-active
      +button-color($primary)
  &.is-info
    +button-color($info)
  &.is-success
    +button-color($success)
  &.is-warning
    +button-color($warning)
  &.is-danger
    +button-color($danger)
  &.is-disabled
    +button-color($disabled)
  &.is-main
    +button-color($main)
  &.is-primary-border
    +border-button-color($primary)
  &.is-secondary-border
    +border-button-color($secondary)
  &.is-muted
    border: none
    color: var(--muted-text)
    font-weight: 400 !important
    background-color: var(--background)
  &.is-muted-bordered
    border-color: $border
    color: $muted-text
    font-weight: 400 !important
    background-color: var(--base)
    &:hover
      background-color: var(--background-more-tint)
      color: var(--semi-muted-text)

  &.is-sm-text
    span
      font-size: .875em
  &.is-lg-icon
    i
      font-size: 1.5em
  &.is-text
    background: none
    border: none
    font-weight: 400
    +hover-link-reversal
    +default-link
    height: auto !important
    padding: 0 !important
  &.is-text-reversal
    background: none
    border: none
    font-weight: 400
    +hover-link
    +muted-link
    height: auto !important
    padding: 0 !important
  &.is-muted-text
    background: none
    border: none
    font-weight: 400
    +hover-link-reversal
    +muted-link
    height: auto !important
    padding: 0 !important

  //size
  &.is-xxs,
  &.is-xxs input[type="submit"]
    +button-size(.625rem, 1, 1.4rem)
    font-weight: 400
  &.is-xs,
  &.is-xs input[type="submit"]
    +button-size(.75rem, 1, 1.7rem)
    font-weight: 400
  &.is-sm,
  &.is-sm input[type="submit"]
    +button-size(.75rem, 1.25, 2rem)
  &.is-md,
  &.is-md input[type="submit"]
    +button-size(.8125rem, 1.4, 2.25rem)
  &.is-lg,
  &.is-lg input[type="submit"]
    +button-size(1rem, 1, 2.75rem)
  &.is-xl,
  &.is-xl input[type="submit"]
    +button-size(1.25rem, 1, 57px)
    font-weight: 800
    +media-breakpoint-down(sm)
      +button-size(1.125rem, 1, 3rem)
  &.is-submit-input
    padding: 0
    &.is-left-icon,
    &.is-right-icon
      +position(relative)
      i
        +text-block(1.125em, flex)
        align-items: center
        justify-content: center
        +position(absolute, top 0, bottom 0)
    &.is-left-icon
      i
        +position(left 0)
        margin-left: .45em
      input[type="submit"]
        padding-left: 2.25em
    &.is-right-icon
      +position(relative)
      i
        +position(right 0)
        margin-right: .45em
      input[type="submit"]
        padding-right: 2.25em

  //icon
  &.is-back
    +position(relative)
    padding-left: .75em
    padding-right: 0
    &::before
      +fa(fas '\f104')
      +position(absolute, left .75em, top 50%)
      transform: translate(0, -50%)

input[type="submit"],
input[type="reset"],
input[type="button"]
  &.a-button
    +input-button-base

.is-button-group
  display: flex
  .is-text-align-center &
    justify-content: center
  >*:not(:last-child)
    margin-right: -1px
  li:first-child
    .a-button
      +border-radius(right, 0)
  li:last-child
    .a-button
      +border-radius(left, 0)
  li:not(:first-child):not(:last-child)
    .a-button
      border-radius: 0

.is-inline-buttons
  display: flex
  gap: .5rem
  .is-text-align-center &
    justify-content: center

[class*=a-button]:not(input)
  padding-block: 0

[class*=a-button]
  &[class*=-primary]:disabled
    background-color: var(--primary)
    cursor: default
