@use 'sass:color';
@use '../colours';
@use '../accessibility';
@use '../typography';
@use '../responsive';
@use '../layout';
@use 'forms';

@mixin button-interaction(
  $color: colours.$off-black,
  $background-color: colours.$white,
  $border-color: colours.$light-grey
) {
  &:enabled,
  &[href] {
    box-shadow: colours.$shadow;
    transition: box-shadow 0.1s ease-in;

    @include accessibility.interactive(
      $color,
      $background-color,
      $border-color
    ) {
      box-shadow: 0 4px 8px 0 color.adjust(colours.$black, $alpha: -0.74);
    }
  }
}

@mixin button(
  $color: colours.$off-black,
  $background-color: colours.$white,
  $border-color: colours.$light-grey
) {
  background-color: $background-color;
  border: 1px solid $border-color;
  border-radius: colours.$border-radius;
  color: $color;
  display: block;
  margin: layout.$spacing-height 0 0 0;
  overflow: hidden;
  padding: 0.5em 1em;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  user-select: none;
  white-space: nowrap;
  width: 100%;

  @include button-interaction($color, $background-color, $border-color);
  @include forms.standard-input-dimensions;

  &:disabled {
    background-color: colours.$light-grey;
    color: colours.$mid-grey;
  }

  @include responsive.respond-to(tablet, desktop) {
    display: inline-block;
    margin: 0;
    width: auto;
  }
}

.transparent {
  @include button(
    $color: inherit,
    $background-color: transparent,
    $border-color: transparent
  );

  &:enabled {
    box-shadow: none;
  }
}

%primary {
  @include button(colours.$off-white, colours.$blue, colours.$blue);
}

.primary {
  @extend %primary;
}

%secondary {
  @include button;
}

.secondary {
  @extend %secondary;
}

.danger {
  @include button(colours.$white, colours.$error, colours.$error);
}

.iconOnly {
  margin: 0;
  padding: 0.5em;

  @include forms.standard-input-dimensions(true);

  & > svg {
    margin: 0;
  }
}

.inputButton {
  border-left: none;
  border-radius: 0 colours.$border-radius colours.$border-radius 0;

  &:enabled {
    box-shadow: none;

    &:focus,
    &:hover {
      border-left: 1px solid;
    }
  }
}
