.button
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    &.is-#{$name}
      +backdrop-filter()
      background-color: rgba(nth($pair, 1), 0.8)

.hero .button
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    &.is-#{$name}
      +backdrop-filter-light()
      background-color: rgba(nth($pair, 1), 0.5)

.button.is-outlined
  +backdrop-filter-light()
  background-image: none

// Button active state
.button,
.pagination-link,
.pagination-previous,
.pagination-next
  &:active
    transform: scale(0.98)

.pagination-previous,
.pagination-next
  padding: 0 2em

.pagination-link
  padding: 0 1em

.delete,
.modal-close
  border-radius: $radius!important
  background-color: rgba(0,0,0,0.1)
  min-width: 24px
  min-height: 24px
  width: 24px
  height: 24px