@import '~normalize.css/normalize.css';
@import '~@amber-ds/visual/src/_variables.scss';
@import '~@amber-ds/visual/src/_mixins.scss';
@import '~@amber-ds/visual/src/_base.scss';
@import '~@amber-ds/visual/src/_typography.scss';

dialog {
  @include sans-serif;

  border: 0;
  padding: 2rem;
  border-top: 4px solid $grey-dark;
  background: $white;

  box-shadow: 0 12px 24px 0 rgba(0,0,0,.1);

  max-width: 50%;
  max-height: 80%;
  height: auto;
  // min-width: 500px;

  section {
    .modal-header {
      margin-bottom: 1rem;
    }

    .modal-footer{
      display: flex;
      justify-content: flex-end;
      margin-top: 1rem;
    }
  }

  &.success {
    background: $success-50;
    border-color: $success-700;
  }

  &.error {
    background: $error-50;
    border-color: $error-700;
  }

  &.warning {
    background: $warning-50;
    border-color: $warning-700;
  }

  &.info {
    background: $info-50;
    border-color: $info-700;
  }
}

.close {
  position: absolute;
  right: 1rem;
  top: 1rem;
}

/* native backdrop */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

/* polyfill backdrop */

dialog + .backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
}