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

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

  box-shadow: 0px 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;

      .btn {
        // TODO: activate (https://redmine.weseek.co.jp/issues/128307)
        // @include bs.button-size(bs.$btn-padding-y-lg, bs.$btn-padding-x-lg, bs.$btn-font-size-lg, bs.$btn-line-height-lg, bs.$btn-border-radius-lg);
      }
    }
  }

  @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;
    }
  }
}