// @import  '../colors/settings';
// @import  '../tools/mixins/spacing';
// @import  '../typography/placeholders';
// @import  '~@momentum-ui/icons/scss/mixins';

@include exports('ng-messagebox') {
  .messagebox-backdrop {
    z-index: 0;
    display: flex;
    width: 100%;
    height: 100vh;
    max-width: 100vw;
    overflow-y: auto;
    color: $md-gray-90;
    background: center center / cover no-repeat fixed;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .message-box {
      position: relative;
      display: flex;
      width: 94vw;
      max-width: vr-adjust(400);
      min-width: vr-adjust(300);
      min-height: 94vh;
      padding: 0;
      margin: 3vw;
      text-align: center;
      background: rgba($md-white-100, 0.85);
      border-radius: rem-calc(12);
      box-shadow: 0 1px 3px 0 rgba($md-black-100, 0.18);
      flex-shrink: 0;
      flex-direction: column;
      justify-content: space-between;

      @include vr-spacing(pv, 3);
      @include vr-spacing(ph, 2);

      @media #{$medium-up} {
        width: vr-adjust(400);
        min-height: vr-adjust(400);
      }

      @media screen and (min-height: 850px) {
        margin-top: vr-adjust(124);
      }

      &:before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        width: 100%;
        height: 100%;
        background: center center / cover no-repeat fixed;
        content: '';
        filter: blur(8px);
      }

      &__footer {
        @include vr-spacing(mt, 2);
        @include vr-spacing(ph, 1.5);

        @extend %body-smallest;

        color: $md-gray-40;

        @media #{$small-only} {
          @include vr-spacing(ph, 0);
        }
      }

      &__icon {
        @include icon;

        display: block;
        margin: 0 auto 2rem;
        font-size: 6rem;
        color: $md-gray-70;
      }

      &__logo {
        height: rem-calc(136);

        @include vr-spacing(mb, 1.25);
      }

      &__title {
        @include vr-spacing(mb, 1.5);

        word-wrap: break-word;

        &--attention {
          color: $md-yellow-50;
        }

        &--alert {
          color: $md-red-50;
        }

        &--success {
          color: $md-green-50;
        }
      }

      &__details,
      p {
        @extend %h5;

        font-size: rem(20);
        // @include vr-spacing(pb, 3);
        // @include vr-spacing(ph, 3);
        color: $md-gray-70;
        text-align: center;
        word-wrap: break-word;

        @include vr-spacing(mb, 1.5);
      }

      .icon-cisco-logo {
        color: $md-theme-50;
      }

      &__btn {
        @include vr-spacing(mb, 1.5);
      }

      button,
      .button {
        min-width: rem-calc(200);
        padding-right: 3.25rem;
        padding-left: 3.25rem;
        margin-top: rem-calc(44);
        border-radius: 25px;
      }
    }

    &__footer {
      color: $md-gray-40;
      text-align: center;
      flex-shrink: 0;

      @include vr-spacing(mb, 0.5);

      @media screen and (min-height: 850px) {
        @include vr-spacing(mt, 2);
      }

      a {
        color: $md-gray-40;
      }

      .icon {
        display: block;
        margin-bottom: 1.25rem;
        font-size: rem-calc(32);
      }
    }

    span {
      font-size: inherit;
    }

    &.dark-backdrop {
      .messagebox-backdrop__footer,
      .messagebox-backdrop__footer > div > a {
        color: $md-white-100;
      }
    }
  }
}