$min-height: control-height();
$vertical-padding: ($min-height - line-height(body) - rem(2px)) / 2;
$slim-min-height: rem(30px);
$slim-vertical-padding: ($slim-min-height - line-height(body) - rem(2px)) / 2;
$large-min-height: rem(44px);
$large-vertical-padding: ($large-min-height - line-height(body) - rem(2px)) / 2;
$spinner-size: rem(20px);

.Biblio-Button {
  @include button-base;

  &.Biblio-Button--disabled {
    @include base-button-disabled;
  }
}

.Biblio-Button__Content {
  @include text-style-button;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 1px;
  min-height: 1px;
}

.Biblio-Button__Icon {
  transition: color duration() easing();

  &:first-child {
    // This compensates for the typical icon used in buttons being
    // inset within its bounding box.
    margin-left: -(spacing(extra-tight));
  }

  &:last-child {
    // This compensates for the disclosure icon, which is substantially
    // inset within the viewbox (and makes it look like there is too much
    // spacing on the right of the button)
    margin-right: -(spacing(tight));
    margin-left: spacing(extra-tight);
  }

  + *:not(.Biblio-Button__Icon) {
    margin-left: spacing(extra-tight);
  }
}

.Biblio-Button__Spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($spinner-size / 2);
  margin-left: -($spinner-size / 2);
}

.Biblio-Button--primary {
  @include button-filled(color('indigo'), color('indigo', 'dark'));
  @include recolor-icon(color('white'));

  &.Biblio-Button--disabled {
    @include button-filled-disabled(color('indigo'));
  }
}

.Biblio-Button--destructive {
  @include button-filled(color('red'), color('red', 'dark'));
  @include recolor-icon(color('white'));

  &.Biblio-Button--disabled {
    @include button-filled-disabled(color('red'));
  }
}

.Biblio-Button--outline {
  @include button-outline(color('ink', 'lighter'));

  &.Biblio-Button--disabled {
    @include button-outline-disabled(color('ink', 'lighter'));
  }
}

.Biblio-Button--destructive.Biblio-Button--outline {
  @include button-outline(color('red'));
  @include recolor-icon(color('red', 'dark'));
}

.Biblio-Button--disabled {
  cursor: default;
  pointer-events: none;
}

@keyframes loading {
  to {
    transform: rotate(360deg);
  }
}

.Biblio-Button--loading {
  position: relative;
  transition: border-color duration() easing();

  &,
  &:hover,
  &.Biblio-Button--disabled {
    color: transparent;
  }
}

// The way the designs work, we need to do lots of reaching down to
// target the content in pseudo-selectors, so we need higher specificity
// in this case.
// stylelint-disable selector-max-specificity

.Biblio-Button--plain {
  @include recolor-icon(color('blue'));
  margin: (-1 * $vertical-padding) rem(-8px);
  padding-left: rem(8px);
  padding-right: rem(8px);
  background: transparent;
  border: 0;
  box-shadow: none;
  color: color('blue');

  &:hover,
  &:focus,
  &:active {
    @include recolor-icon(color('blue', 'dark'));
    background: transparent;
    border: 0;
    box-shadow: none;
    color: color('blue', 'dark');
  }

  &:focus > .Biblio-Button__Content::after {
    opacity: 1;
  }

  &.Biblio-Button--fullWidth {
    margin-left: 0;
    margin-right: 0;
  }

  &.Biblio-Button--disabled {
    background: none;
  }

  &.Biblio-Button--sizeSlim {
    margin-top: (-1 * $slim-vertical-padding);
    margin-bottom: (-1 * $slim-vertical-padding);
  }

  &.Biblio-Button--sizeLarge {
    margin: (-1 * $large-vertical-padding) (-1 * spacing(loose));
  }

  &.Biblio-Button--iconOnly {
    @include recolor-icon(color('ink', 'lighter'));
    margin: -0.5 * ($min-height - icon-size());

    &:focus,
    &:active {
      @include recolor-icon(color('ink', 'lighter'));
      background: plain-button-background();
    }

    &:hover,
    &:active {
      @include recolor-icon(color('ink'));
    }

    // stylelint-disable-next-line selector-max-class
    > .Biblio-Button__Content::after {
      display: none;
    }

    &.Biblio-Button--disabled {
      @include recolor-icon(color('sky', 'dark'));
    }
  }

  > .Biblio-Button__Content::after {
    @include plain-button-backdrop;
    content: '';
    opacity: 0;
  }

  .Biblio-Button__Icon {
    margin-left: 0;
    margin-right: 0;
  }
}
// stylelint-enable selector-max-specificity

.Biblio-Button--sizeSlim {
  min-height: $slim-min-height;
  padding: $slim-vertical-padding spacing(base-tight);
}

.Biblio-Button--sizeLarge {
  min-height: $large-min-height;
  min-width: $large-min-height;
  padding: $large-vertical-padding rem(24px);

  .Biblio-Button__Content {
    @include text-style-button-large;
  }
}

.Biblio-Button--fullWidth {
  @include button-full-width;
}

.Biblio-Button--iconOnly {
  padding-left: rem(8px);
  padding-right: rem(8px);

  &.Biblio-Button--sizeLarge {
    padding-left: spacing(base-tight);
    padding-right: spacing(base-tight);
  }

  .Biblio-Button__Icon:first-child {
    margin-left: 0;
  }

  .Biblio-Button__Icon:last-child {
    margin-right: rem(-4px);
  }

  .Biblio-Button__Icon:only-child {
    margin-right: 0;
  }
}

// stylelint-disable selector-max-specificity
.Biblio-Button--monochrome {
  &.Biblio-Button--outline,
  &.Biblio-Button--plain {
    @include recolor-icon(currentColor);
    color: currentColor;

    &:hover,
    &:focus,
    &:active {
      @include recolor-icon(currentColor);
      color: currentColor;
    }

    &.Biblio-Button--disabled {
      color: currentColor;
      @include recolor-icon(currentColor);
      opacity: 0.4;
    }

    &.Biblio-Button--iconOnly {
      @include recolor-icon(currentColor);

      &:focus,
      &:active {
        @include recolor-icon(currentColor);
      }

      &.Biblio-Button--disabled {
        @include recolor-icon(currentColor);
      }
    }
  }

  &.Biblio-Button--plain {
    .Biblio-Button__Text {
      @include underlined-link;
    }

    &:hover,
    &:focus,
    &:active {
      // stylelint-disable selector-max-class, max-nesting-depth
      .Biblio-Button__Text {
        &::after {
          opacity: 0.4;
        }
      }
      // stylelint-enable selector-max-class, max-nesting-depth
    }
  }

  &.Biblio-Button--outline {
    position: relative;
    border-color: currentColor;

    &::before {
      content: '';
      transition: opacity duration() easing();
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: currentColor;
      opacity: 0;
      z-index: 0;
    }

    &:hover,
    &:focus,
    &:active {
      background-color: transparent;
      border-color: currentColor;
      &::before {
        opacity: 0.05;
      }
    }
  }
}
// stylelint-enable selector-max-specificity