.sdc-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: auto;
  display: flex;
  align-items: center;
  z-index: 1001;
  svg path {
    fill: inherit;
  }
  .sdc-modal__wrapper {
    @include body-1;
    background: $white;
    width: 100%;
    @include box-shadow(0 0 4px 0 rgba(0, 0, 0, 0.50));
    color: $text-black;
    display: flex;
    flex-direction: column;
    &.sdc-modal-type-info {
      border-top: solid 6px $blue;
      .sdc-modal__svg-use {
        fill: $blue;
      }
      .svg-icon {
        &.__errorCircle {
          width: 30px;
          height: 30px;
        }
      }
    }
    &.sdc-modal-type-alert {
      border-top: solid 6px $yellow;
      .sdc-modal__svg-use {
        fill: $yellow;
      }
      .svg-icon {
        &.__exclamationTriangleLine {
          width: 30px;
          height: 30px;
        }
      }
    }
    &.sdc-modal-type-error {
      border-top: solid 6px $red;
      .sdc-modal__svg-use {
        fill: $red;
      }
      .svg-icon {
        &.__error {
          width: 30px;
          height: 30px;
        }
      }
    }
    &.sdc-modal-type-custom {
      padding: 0px;
      border-top: none;
      .sdc-custom__header {
        @include box-sizing;
        background-color: $blue;
        color: $white;
        height: 50px;
        align-items: center;
        padding-top: 0px;
        .title {
          color: $white;
          padding-top: 0px;
          @include heading-3;
        }
        .sdc-modal__close-button {
          margin-top: 0px;
          width: 16px;
          height: 16px;
          line-height: 16px;
          .svg-icon > svg {
            fill: $white;
            color: $white;
          }
          &.disabled {
            cursor: default;
            .svg-icon > svg {
              fill: $silver;
              color: $silver;
            }
          }
        }
        .sdc-modal__close-button-svg {
          width: 16px;
          height: 16px;
          .sdc-modal__svg-use {
            fill: $white;
          }
          .svg-icon {
            height: 16px;
            width: 16px;
            fill: $white;
          }
        }
      }
      .sdc-modal__content {
        padding: 20px 40px;
      }
    }
    .sdc-modal__header {
      padding: 20px 20px 0 20px;
      display: flex;
      justify-content: space-between;
      text-align: left;
      height: 30px;
      line-height: 30px;
      .sdc-modal__icon {
        margin-right: 10px;
      }
      .title {
        @include heading-2;
        flex: 1 1 auto;
        color: $text-black;
      }
      .sdc-modal__close-button {
        order: 3;
        width: 14px;
        height: 14px;
        line-height: 14px;
        cursor: pointer;
        .sdc-modal__svg-use {
          fill: $black;
        }
        &.disabled {
          cursor: default;
        }
      }
    }
    .sdc-modal__content {
      order: 2;
      padding: 10px 60px 20px 60px;
    }
    .sdc-modal__footer {
      order: 3;
      background-color: $white;
      border-top: solid 1px $silver;
      padding: 10px;
      display: flex;
      justify-content: flex-end;
      button {
        margin-left: 10px;
      }
    }
  }
}

.modal-background {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $black;
  opacity: 0.70;
  z-index: 1000;
  &.show {
    z-index: 1000;
    opacity: 0.70;
    transition: opacity .3s ease, z-index .3s;
  }
  &.hide {
    z-index: -1;
    opacity: 0;
    transition: opacity .35s ease, z-index .35s;
  }
}

.xl {
  width: 1200px;
}

.l {
  width: 875px;
}

.md {
  width: 650px;
}

.sm {
  width: 500px;
}

.xsm {
  width: 432px;
}