.gui-modal {
    overflow: hidden;
}

.gui-modal--hide-close {
  .gui-modal-header .gui-close {
    display: none;
  }
}

.gui-modal-body {
    padding: $modal-padding;
    overflow: hidden;
    background-color: white;
    border-radius: 6px;
    background-clip: padding-box;

    h4 {
        font-size: $modal-heading-font-size;
        margin-bottom: 0;
    }

  &.gui-has-columns {
    padding: 0;
  }
}

.gui-modal-header {
  position: relative;
  padding: 0;

  .gui-close {
    position: absolute;
    right: $layout-spacing-base;
    top: $layout-spacing-base;
  }
}

.gui-modal-header-inner {
  padding: $modal-padding $modal-padding*2 $modal-padding $modal-padding;
  display: inline-flex;
  align-items: baseline;
  flex-direction: column;
}

.gui-modal-content {
    margin: 0;
    position: relative;
    border: 0;
}

.gui-modal-footer {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  background: white;
  border-radius: 0 0 6px 6px;
}

.gui-modal-dialog {
  position: relative;
}

.gui-modal-title {
    font-size: $modal-heading-font-size;
    font-weight: $typo-weight-semi-bold;

    img {
      position: relative;
      top: 2px;
      margin: 0 0 0 $layout-spacing-base*0.5;
      width: $typo-size-large;
    }
}

.gui-modal.gui-fade .gui-modal-dialog {
  transition: transform .3s ease-out;
}

.gui-modal.gui-in .gui-modal-dialog {
  transform: none;
}