$accent-height: 3px;
$heading-offset: rem(2px);
$intermediate-spacing: spacing(base-tight);
$ribbon-flex-basis: rem(32px);
$secondary-action-vertical-padding: 0.5 * (control-height() - line-height(body));
$secondary-action-horizontal-padding: 1.5 * spacing(tight);

@mixin banner-attributes($highlight, $background, $in-page, $tint) {
  transition: box-shadow duration() easing();
  transition-delay: duration(fast);

  @if $in-page {
    box-shadow: inset 0 $accent-height 0 0 $highlight, inset shadow(transparent),
      shadow();
  }

  @if $tint {
    background-color: mix(white, $background, 44%);
  } @else {
    background-color: $background;
  }

  &:focus {
    outline: none;
    box-shadow: inset 0 $accent-height 0 0 $highlight,
      inset 0 0 0 $accent-height $highlight, shadow();
  }
}

@mixin banner-variants($in-page: false) {
  @include banner-attributes(
    color('ink', 'lighter'),
    color('sky', 'light'),
    $in-page,
    false
  );

  &.Biblio-Banner--statusSuccess {
    @include banner-attributes(
      color('green'),
      color('green', 'lighter'),
      $in-page,
      true
    );
  }

  &.Biblio-Banner--statusInfo {
    @include banner-attributes(
      color('teal'),
      color('teal', 'lighter'),
      $in-page,
      true
    );
  }

  &.Biblio-Banner--statusWarning {
    @include banner-attributes(
      color('yellow'),
      color('yellow', 'lighter'),
      $in-page,
      true
    );
  }

  &.Biblio-Banner--statusCritical {
    @include banner-attributes(
      color('red'),
      color('red', 'lighter'),
      $in-page,
      true
    );
  }
}

.Biblio-Banner {
  position: relative;
  display: flex;
}

.Biblio-Banner--withinContentContainer {
  border-radius: border-radius();
  padding: spacing(tight) $intermediate-spacing;

  @include banner-variants;

  + .Biblio-Banner {
    margin-top: spacing(tight);
  }

  .Biblio-Banner__Ribbon {
    padding-right: $intermediate-spacing;
  }

  .Biblio-Banner__Actions {
    padding: $intermediate-spacing 0 spacing(extra-tight) 0;
  }

  .Biblio-Banner__Dismiss {
    right: $intermediate-spacing;
    top: $intermediate-spacing;
    position: absolute;
  }
}

.Biblio-Banner--withinPage {
  border-radius: 0 0 border-radius() border-radius();
  padding: spacing();

  @include banner-variants(true);

  + .Biblio-Banner {
    margin-top: spacing(loose);
  }

  .Biblio-Banner__Ribbon {
    padding-right: spacing();
  }

  .Biblio-Banner__Actions {
    padding-top: spacing();
  }

  .Biblio-Banner__Dismiss {
    right: spacing();
    top: spacing(loose);
    position: absolute;
  }
}

.Biblio-Banner--hasDismiss {
  padding-right: spacing() + spacing(extra-tight) + control-height();
}

.Biblio-Banner__Heading {
  padding-top: $heading-offset;
}

.Biblio-Banner__Content {
  padding: spacing(extra-tight) 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

.Biblio-Banner__Ribbon {
  flex: 0 0 $ribbon-flex-basis;
}

.Biblio-Banner__PrimaryAction {
  margin-right: rem(6px);
}

// We need pretty high specificity to do the descendant selectors
// onto the text, which needs to be the relative positioned wrapper
// so that the borders/ backgrounds do not extend outside of it.
// stylelint-disable selector-max-specificity

.Biblio-Banner__SecondaryAction {
  @include unstyled-button;
  @include unstyled-link;
  display: inline-block;
  margin: (-1 * $secondary-action-vertical-padding)
    (-0.5 * $secondary-action-horizontal-padding);
  padding: $secondary-action-vertical-padding
    $secondary-action-horizontal-padding;
  color: color('ink');
  padding-left: rem(6px);

  &:hover > .Biblio-Banner__Text::after {
    opacity: 0.75;
  }

  &:active > .Biblio-Banner__Text::after {
    opacity: 0;
  }

  &:focus > .Biblio-Banner__Text {
    &::before {
      opacity: 1;
    }

    &::after {
      opacity: 0;
    }
  }
}

// stylelint-enable selector-max-specificity
.Biblio-Banner__Text {
  position: relative;

  &::after,
  &::before {
    content: '';
    position: absolute;
  }

  &::before {
    @include plain-button-backdrop;
    opacity: 0;
  }

  &::after {
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    border: border-width() solid currentColor;
    opacity: 0.25;
    will-change: opacity;
    transition: opacity duration() easing();
  }
}