.Polaris-Banner {
  position: relative;
  display: flex;
}
.Polaris-Banner--withinContentContainer {
  border-radius: $banner-within-container-border-radius;
  padding: .8rem 1.2rem;
  transition: box-shadow .2s cubic-bezier(.64, 0, .35, 1);
  transition-delay: .1s;
  box-shadow: $banner-within-container-box-shadow;
  background-color: $banner-within-container-bgcolor;

  @media (-ms-high-contrast: active) {
    box-shadow: inset 0 3px 0 0 windowText, inset 0 0 .1rem .1rem windowText;
  }

  &:focus {
    outline: none;
    box-shadow: $banner-within-container-focus-box-shadow;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      z-index: 1;
      top: -.3rem;
      right: -.3rem;
      bottom: -.3rem;
      left: -.3rem;
      display: block;
      border: $banner-within-container-focus-after-border;
      border-radius: $banner-within-container-focus-after-border-radius;
      pointer-events: none;
    }
  }

  .Polaris-Banner__Ribbon {
    padding-right: 1.2rem;
  }

  .Polaris-Banner__Actions {
    padding: 1.2rem 0 .4rem;
  }

  .Polaris-Banner__Dismiss {
    right: 1.2rem;
    top: 1.2rem;
    position: absolute;
  }
}

.Polaris-Banner--withinContentContainer.Polaris-Banner--statusSuccess {
  transition: box-shadow .2s cubic-bezier(.64, 0, .35, 1);
  transition-delay: .1s;
  border-radius: $banner-within-container-succes-border-radius;
  box-shadow: $banner-within-container-succes-box-shadow;
  background-color: $banner-within-container-succes-bgcolor;

  &:focus {
    outline: none;
    box-shadow: $banner-within-container-focus-box-shadow;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      z-index: 1;
      top: -.3rem;
      right: -.3rem;
      bottom: -.3rem;
      left: -.3rem;
      display: block;
      border: $banner-within-container-succes-focus-border;
      border-radius: $banner-within-container-succes-focus-border-radius;
      pointer-events: none;
    }
  }
}

.Polaris-Banner--withinContentContainer.Polaris-Banner--statusInfo {
  --p-banner-background: rgba(235, 249, 252, 1);
  --p-banner-border: inset 0 0.1rem 0 0 rgba(152, 198, 205, 1), inset 0 0 0 0.1rem rgba(152, 198, 205, 1);
  transition: box-shadow .2s cubic-bezier(.64, 0, .35, 1);
  transition-delay: .1s;
  border-radius: $banner-within-container-statusinfo-border-radius;
  box-shadow: $banner-within-container-statusinfo-box-shadow;
  background-color: $banner-within-container-statusinfo-bgcolor;
  @media (-ms-high-contrast: active) {
    box-shadow: inset 0 3px 0 0 windowText, inset 0 0 .1rem .1rem windowText;
  }

  &:focus {
    outline: none;
    box-shadow: $banner-within-container-statusinfo-focus-box-shadow;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      z-index: 1;
      top: -.3rem;
      right: -.3rem;
      bottom: -.3rem;
      left: -.3rem;
      display: block;
      border: $banner-within-container-statusinfo-focus-after-border;
      border-radius: $banner-within-container-statusinfo-focus-after-border-radius;
      pointer-events: none;
    }
  }
}

.Polaris-Banner--withinContentContainer.Polaris-Banner--statusWarning {
  --p-banner-background: rgba(255, 245, 234, 1);
  --p-banner-border: inset 0 0.1rem 0 0 rgba(225, 184, 120, 1), inset 0 0 0 0.1rem rgba(225, 184, 120, 1);
  transition: box-shadow .2s cubic-bezier(.64, 0, .35, 1);
  transition-delay: .1s;
  border-radius: $banner-within-container-statuswarning-border-radius;
  box-shadow: $banner-within-container-statuswarning-box-shadow;
  background-color: $banner-within-container-statuswarning-bgcolor;
  @media (-ms-high-contrast: active) {
    box-shadow: inset 0 3px 0 0 windowText, inset 0 0 .1rem .1rem windowText;
  }

  &:focus {
    outline: none;
    box-shadow: $banner-within-container-statuswarning-focus-box-shadow;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      z-index: 1;
      top: -.3rem;
      right: -.3rem;
      bottom: -.3rem;
      left: -.3rem;
      display: block;
      border: $banner-within-container-statuswarning-focus-after-border;
      border-radius: $banner-within-container-statuswarning-focus-after-border-radius;
      pointer-events: none;
    }
  }
}

.Polaris-Banner--withinContentContainer.Polaris-Banner--statusCritical {
  --p-banner-background: rgba(255, 244, 244, 1);
  --p-banner-border: inset 0 0.1rem 0 0 rgba(224, 179, 178, 1), inset 0 0 0 0.1rem rgba(224, 179, 178, 1);
  transition: box-shadow .2s cubic-bezier(.64, 0, .35, 1);
  transition-delay: .1s;
  border-radius: $banner-within-container-statuscritical-border-radius;
  box-shadow: $banner-within-container-statuscritical-box-shadow;
  background-color: $banner-within-container-statuscritical-bgcolor;
  @media (-ms-high-contrast: active) {
    box-shadow: inset 0 3px 0 0 windowText, inset 0 0 .1rem .1rem windowText;
  }

  &:focus {
    outline: none;
    box-shadow: $banner-within-container-statuscritical-focus-box-shadow;
    position: relative;

    &:after {
      content: var(--p-non-null-content, none);
      position: absolute;
      z-index: 1;
      top: -.3rem;
      right: -.3rem;
      bottom: -.3rem;
      left: -.3rem;
      display: block;
      border: $banner-within-container-statuscritical-focus-after-border;
      border-radius: $banner-within-container-statuscritical-focus-after-border-radius;
      pointer-events: none;
    }
  }
}

.Polaris-Banner--withinContentContainer + .Polaris-Banner {
  margin-top: .8rem;
}

.Polaris-Banner--withinPage {
  border-radius: $banner-withinpage-border-radius;
  padding: 2rem 2rem 1.8rem;
  transition: box-shadow .2s cubic-bezier(.64, 0, .35, 1);
  transition-delay: .1s;
  box-shadow: $banner-withinpage-box-shadow;
  background-color: $banner-withinpage-bgcolor;

  &:focus {
    outline: none;
  }

  .Polaris-Banner__Ribbon {
    padding-right: 1.6rem;
  }

  .Polaris-Banner__Actions {
    padding-top: 1.6rem;
  }

  .Polaris-Banner__Dismiss {
    right: 1.6rem;
    top: 2rem;
    position: absolute;
  }

  .Polaris-Banner__ContentWrapper {
    margin-top: -.2rem;
  }
}

.Polaris-Banner--withinPage.Polaris-Banner--statusSuccess {
  --p-banner-background: rgba(241, 248, 245, 1);
  --p-banner-border: inset 0 0.1rem 0 0 rgba(149, 201, 180, 1), inset 0 0 0 0.1rem rgba(149, 201, 180, 1);
  transition: box-shadow .2s cubic-bezier(.64, 0, .35, 1);
  transition-delay: .1s;
  box-shadow: $banner-withinpage-statussuccess-box-shadow;
  background-color: $banner-withinpage-statussuccess-bgcolor;

  &:focus {
    outline: none;
  }
}

.Polaris-Banner--withinPage.Polaris-Banner--statusInfo {
  --p-banner-background: rgba(235, 249, 252, 1);
  --p-banner-border: inset 0 0.1rem 0 0 rgba(152, 198, 205, 1), inset 0 0 0 0.1rem rgba(152, 198, 205, 1);
  transition: box-shadow .2s cubic-bezier(.64, 0, .35, 1);
  transition-delay: .1s;
  box-shadow: $banner-withinpage-statusinfo-box-shadow;
  background-color: $banner-withinpage-statusinfo-bgcolor;
  @media (-ms-high-contrast: active) {
    box-shadow: inset 0 3px 0 0 windowText, inset 0 0 .1rem .1rem windowText;
  }

  &:focus {
    outline: none;
    box-shadow: $banner-withinpage-statusinfo-focus-box-shadow;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      z-index: 1;
      top: -.3rem;
      right: -.3rem;
      bottom: -.3rem;
      left: -.3rem;
      display: block;
      border: $banner-withinpage-statusinfo-focus-after-border;
      border-radius: $banner-withinpage-statusinfo-focus-after-border-radius;
      pointer-events: none;
    }
  }
}

.Polaris-Banner--withinPage.Polaris-Banner--statusWarning {
  transition: box-shadow .2s cubic-bezier(.64, 0, .35, 1);
  transition-delay: .1s;
  box-shadow: $banner-withinpage-statuswarning-box-shadow;
  background-color: $banner-withinpage-statuswarning-bgcolor;

  &:focus {
    outline: none;
  }
}

.Polaris-Banner--withinPage.Polaris-Banner--statusCritical {
  --p-banner-background: rgba(255, 244, 244, 1);
  --p-banner-border: inset 0 0.1rem 0 0 rgba(224, 179, 178, 1), inset 0 0 0 0.1rem rgba(224, 179, 178, 1);
  transition: box-shadow .2s cubic-bezier(.64, 0, .35, 1);
  transition-delay: .1s;
  box-shadow: $banner-withinpage-statuscritical-box-shadow;
  background-color: $banner-withinpage-statuscritical-bgcolor;
  @media (-ms-high-contrast: active) {
    box-shadow: inset 0 3px 0 0 windowText, inset 0 0 .1rem .1rem windowText;
  }

  &:focus {
    outline: none;
    box-shadow: $banner-withinpage-statuscritical-focus-box-shadow;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      z-index: 1;
      top: -.3rem;
      right: -.3rem;
      bottom: -.3rem;
      left: -.3rem;
      display: block;
      border: $banner-withinpage-statuscritical-focus-after-border-radius;
      border-radius: $banner-withinpage-statuscritical-focus-after-border;
      pointer-events: none;
    }
  }
}

.Polaris-Banner--withinPage + .Polaris-Banner {
  margin-top: 2rem;
}

.Polaris-Banner--hasDismiss {
  padding-right: 4.2rem;
}

.Polaris-Banner__Heading {
  word-break: break-word;
}

.Polaris-Banner__Content {
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  padding: .4rem 0;
}

.Polaris-Banner__Ribbon {
  flex: 0 0 3.2rem;
}

.Polaris-Banner__PrimaryAction {
  margin-right: .6rem;
}

.Polaris-Banner__SecondaryAction {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  display: inline-block;
  text-align: left;
  margin: -0.8rem -0.6rem;
  padding: 0.8rem 1.2rem;
  color: rgba(32, 34, 35, 1);
  padding-left: 0.6rem;
}

.Polaris-Banner__SecondaryAction:focus {
  outline: none;
}

.Polaris-Banner__SecondaryAction:visited {
  color: inherit;
}

.Polaris-Banner__SecondaryAction:hover > .Polaris-Banner__Text {
  box-shadow: 0 -2px 0 0 rgba(33, 43, 54, 0.75) inset;
}

.Polaris-Banner__SecondaryAction:active > .Polaris-Banner__Text {
  box-shadow: 0 -2px 0 0 rgba(33, 43, 54, 0) inset;
}

.Polaris-Banner__SecondaryAction:focus > .Polaris-Banner__Text {
  padding: 2px 5px;
  margin: -2px -5px;
  background: rgba(246, 246, 247, 1);
  border-radius: 3px;
  box-shadow: none;
}

@media (-ms-high-contrast: active) {
  .Polaris-Banner__SecondaryAction:focus > .Polaris-Banner__Text {
    outline: 2px dotted;
  }
}

.Polaris-Banner__Text {
  position: relative;

  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    border: .1rem solid;
    opacity: .25;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity;
    transition: opacity .2s cubic-bezier(.64, 0, .35, 1);
  }

  &:before {
    content: "";
    position: absolute;
  }
}