$dialog-width: 270px !default;
$dialog-min-height: 104px !default;

$dialog-bg: $white !default;
$dialog-border-radius: 13px !default;

$dialog-body-padding-ver: 20px !default;
$dialog-body-padding-hor: 15px !default;

$dialog-title-font-size: 16px !default;
$dialog-title-font-weight: bold !default;
$dialog-title-line-height: 20px !default;

$dialog-content-padding-ver: 6px !default;
$dialog-content-font-size: 13px !default;
$dialog-content-color: #111111 !default;
$dialog-content-line-height: 18px !default;

$dialog-btn-height: 44px !default;
$dialog-btn-font-size: 17px !default;

.mx {
  &-dialog {
    width: $dialog-width;
    min-height: $dialog-min-height;

    background-color: $dialog-bg;
    border-radius: $dialog-border-radius;

    text-align: center;
    box-sizing: border-box;

    &-header {
      padding: $dialog-body-padding-ver $dialog-body-padding-hor;

      &-title {
        font-size: $dialog-title-font-size;
        font-weight: $dialog-title-font-weight;
        line-height: $dialog-title-line-height;
        color: $dark-black;
      }
    }

    &-body {
      padding-left: $dialog-body-padding-hor;
      padding-right: $dialog-body-padding-hor;
      padding-bottom: $dialog-body-padding-ver ;

      &-content {
        font-size: $dialog-content-font-size;
        line-height: $dialog-content-line-height;
        color: $dialog-content-color;
      }
    }

    &-footer {
      display: flex;
      overflow: hidden;
      border-top: $spliter;

      &--confirm,
      &--more {
        flex-direction: column;
      }

      &--alter {
        flex-direction: row;
      }

      &-btn {
        flex: 1;
        height: $dialog-btn-height;
        font-size: $dialog-btn-font-size;
        line-height: $dialog-btn-height;
        text-align: center;
        color: $brand;
        box-sizing: border-box;

        &--primary {
          font-weight: bold;
        }

        &--confirm,
        &--more {
          border-bottom: $spliter;
          line-height: $dialog-btn-height - 1px;
        }

        &--alter {
          border-right: $spliter;
        }

        &:last-child {
          border: none !important;
          line-height: $dialog-btn-height;
        }
      }
    }
  }
}