weseek__growi/apps/app/src/components/PageStatusAlert.module.scss

@use '~/styles/variables' as var;
@use '~/styles/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 {
        @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;
    }
  }
}