@use '~/styles/variables' as var;
@use '@growi/core-styles/scss/bootstrap/init' as bs;

.grw-page-status-alert :global {
  $margin-bottom: var.$grw-navbar-bottom-height + 10px;

  box-shadow: 0 2px 4px #0000004d;
  opacity: 0.9;

  @include bs.media-breakpoint-down(sm) {
    margin: 0 10px $margin-bottom;

    .grw-card-label-container {
      text-align: center;
    }
    .grw-card-btn-container {
      text-align: center;
    }
  }

  @include bs.media-breakpoint-up(md) {
    width: 700px;
    margin: 0 auto $margin-bottom;

    .card-body {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .grw-card-label-container,
    .grw-card-btn-container {
      margin: 0;
    }
  }
}