.a-page-notice
  background-color: var(--success)
  color: var(--reversal-text)
  &.is-danger
    background-color: var(--danger)
  &.is-muted
    background-color: var(--background-shade)
    .a-page-notice__inner
      color: var(--default-text)
  .page-body &
    margin-block: -.5rem 1rem
  .page-body .page-notices__item &
    margin-block: 0
  .page-tabs + &
    margin-top: 1rem

.a-page-notice__inner
  padding-block: .5rem
  color: var(--reversal-text)
  +media-breakpoint-up(md)
    text-align: center
    font-size: .875rem
  +media-breakpoint-down(sm)
    font-size: .75rem
  &.has-close
    position: relative
    display: flex
    text-align: left
  p
    +text-block(1em 1.5)
    +media-breakpoint-up(md)
      font-size: .875rem
    +media-breakpoint-down(sm)
      font-size: .75rem
  a
    color: var(--reversal-text)
    +hover-link-reversal
    &.has-badge
      text-decoration: none
      +media-breakpoint-down(sm)
        display: block
      .a-badge
        margin-right: .75rem
        background-color: rgba(black, .4)
        border: none
        +media-breakpoint-down(sm)
      .a-page-notice__label
        +hover-link-reversal
        +media-breakpoint-up(md)
          max-width: 17.5rem
          overflow: hidden
          text-overflow: ellipsis
          display: inline-block
          white-space: nowrap
          vertical-align: bottom

.a-page-notice__inner-start
  flex: 1

.a-page-notice__close
  +size(2.75rem)
  display: flex
  align-items: center
  justify-content: center
  cursor: pointer
  font-size: 1.5rem
  opacity: .6
  transition: all .2s ease-out
  transform: translateX(1rem)
  margin-block:  -.75rem
  &:hover
    opacity: 1
