@include b(dialog) {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(250, 250, 250, 0.2);

  @include e(header) {
    position: relative;
    padding-bottom: $--dialog-padding-primary - 10px;
    background-color: #f9f9f9;
    border-radius: 12px 12px 0 0;
  }

  @include e(title) {
    position: relative;
    font-size: $--font-size-extra-large;

    &::before {
      content: '';
      position: absolute;
      width: 6px;
      height: $--font-size-extra-large;
      background: var(--primary);
      left: -20px;
      top: 50%;
      transform: translateY(-50%);
      box-shadow: 2px 0px 12px 6px rgba(255, 255, 255, 1);
      // box-shadow: 0 0 12px rgba($--color-primary, 0.4);
    }
  }

  @include e(close) {
    // color: #fff !important;
  }

  @include e(body) {
    font-size: $--font-size-base;
  }

  @include when(hide-header) {
    @include e(header) {
      display: none;
    }
  }

  @include when(vertical-center) {
    margin-top: 0 !important;
    top: 50%;
    transform: translateY(-50%);
  }
}