@import '../../styles/common';

$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);
  border-radius: var(--p-border-radius-wide, inherit);
  box-shadow: var(--p-banner-border, none);

  @media (-ms-high-contrast: active) {
    box-shadow: inset 0 $accent-height 0 0 ms-high-contrast-color('text'),
      inset 0 0 border-width(base) border-width(base)
        ms-high-contrast-color('text');
  }

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

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

  &:focus {
    outline: none;
    box-shadow: var(
      --p-banner-border,
      (
        inset 0 $accent-height 0 0 $highlight,
        inset 0 0 0 $accent-height $highlight,
        shadow()
      )
    );

    @include focus-ring('wide');
  }
}

@mixin banner-variants($in-page: false) {
  --p-banner-background: var(--p-surface-background);
  --p-banner-border: var(--p-banner-default-border);
  @include banner-attributes(
    var(--p-divider-on-surface, color('ink', 'lighter')),
    color('sky', 'light'),
    $in-page,
    false
  );

  &.statusSuccess {
    --p-banner-background: var(--p-success-surface-subdued);
    --p-banner-border: var(--p-banner-success-border);
    @include banner-attributes(
      var(--p-success-divider, color('green')),
      color('green', 'lighter'),
      $in-page,
      true
    );
  }

  &.statusInfo {
    --p-banner-background: var(--p-highlight-surface-subdued);
    --p-banner-border: var(--p-banner-highlight-border);
    @include banner-attributes(
      var(--p-highlight-divider, color('teal')),
      color('teal', 'lighter'),
      $in-page,
      true
    );
  }

  &.statusWarning {
    --p-banner-background: var(--p-warning-surface-subdued);
    --p-banner-border: var(--p-banner-warning-border);
    @include banner-attributes(
      var(--p-warning-divider, color('yellow')),
      color('yellow', 'lighter'),
      $in-page,
      true
    );
  }

  &.statusCritical {
    --p-banner-background: var(--p-critical-surface-subdued);
    --p-banner-border: var(--p-banner-critical-border);
    @include banner-attributes(
      var(--p-critical-diviver, color('red')),
      color('red', 'lighter'),
      $in-page,
      true
    );
  }
}

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

.withinContentContainer {
  border-radius: var(--p-border-radius-wide, border-radius());
  padding: spacing(tight) $intermediate-spacing;

  @include banner-variants;

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

  .Ribbon {
    padding-right: $intermediate-spacing;
  }

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

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

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

  @include banner-variants(true);

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

  .Ribbon {
    padding-right: spacing();
  }

  .Actions {
    padding-top: spacing();
  }

  .Dismiss {
    right: spacing();
    top: spacing(loose);
    position: absolute;
  }
}

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

.Heading {
  padding-top: $heading-offset;
  word-break: break-word;
}

.Content {
  @include text-breakword;
  padding: spacing(extra-tight) 0;
}

.Ribbon {
  flex: 0 0 $ribbon-flex-basis;
}

.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

.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: var(--p-text-on-surface, color('ink'));
  padding-left: rem(6px);

  &:hover > .Text::after {
    opacity: 0.75;
  }

  &:active > .Text::after {
    opacity: 0;
  }

  &:focus > .Text {
    @include plain-button-backdrop;
    @include high-contrast-button-outline;

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

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

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

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