%active-button {
  transform: translate(-$button-hover-transform-length, -$button-hover-transform-length);
  box-shadow: box-shadow(1);
}

%button {
  background: transparent;
  @include font-size($form-element-font-size);
  padding: $form-element-padding-y $form-element-padding-x;
  border: $border;
  color: currentColor;
  border-radius: $form-element-border-radius;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: spacer(2);
  cursor: pointer;
  text-decoration: none;
  @include transition(transform);

  &:hover:not(:active):not(:disabled),
  &[aria-haspopup][aria-expanded="true"] {
    @extend %active-button;
  }

  @each $name in $bg-colors {
    &.#{$name},
    &.outline-#{$name}:hover:not(:disabled) {
      @include bg-color($name);
    }
  }

  &.small {
    @include font-size(1);
    padding: spacer(2);
  }

  &.primary:hover:not(:disabled) {
    @include bg-color(accent);
  }
}

@mixin buttons {
  button {
    all: unset;
    outline: revert;
    cursor: pointer;

    &:disabled {
      @extend [inert];
    }
  }

  .button {
    @extend %button;
  }

  @each $name, $info in $brands {
    .button-#{$name} {
      $color: map-get($info, color);
      background-color: $color;
      color: map-get($info, text-color) or fg-color($color);

      &::before {
        @extend .brand-icon, .brand-icon-#{$name};
      }
    }
  }
}

%select-button {
  text-align: initial;
  align-items: flex-start;
  justify-content: initial;
  gap: spacer(3);

  h4 {
    font-weight: bold;
  }

  & > :first-child {
    flex-shrink: 0;
  }

  &.vertical {
    flex-flow: column;
  }
}

%select-button-active {
  background-color: var(--active-bg);
  @extend %active-button;
}
