@include export-module('co-dialog-layout') {
  .co-dialog {
    font-family: $cc-co-dialog-font-family;
    font-size: $cc-co-dialog-font-size;
    .co-dialog-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 800;
      min-height: 100vh;
    }
    .co-dialog-placeholder {
      position: fixed;
      z-index: 801;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .co-dialog-wrapper {
      position: fixed;
      left: 0;
      display: flex;
      flex-direction: column;
      border-radius: $cc-co-dialog-border-radius;
      max-width: 100vw;
      z-index: 801;
      height: auto;
      width: 100%;
      max-height: 80vh;
      padding: $cc-co-dialog-padding;
    }
    &:not(.is-mobile) {
      .co-dialog-wrapper {
        position: relative;
        //top: 50%;
        //left: 50%;
        min-width: $cc-co-dialog-min-width;
        //transform: translate(-50%, -50%);
        width: 50vw;
      }
    }
    .dialog-drag-handle {
      display: flex;
      width: 100%;
      height: $cc-co-dialog-drag-handle-height;
      position: absolute;
      top: 0;
      left: 0;
    }
    .dialog-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      font-family: $cc-co-dialog-header-font-family;
      font-size: $cc-co-dialog-header-font-size;
      padding: $cc-co-dialog-header-padding;
      .dialog-header-caption {
        width: 100%;
        font-weight: $cc-co-dialog-header-font-weight;
        margin: $cc-co-dialog-header-margin;
        border-style: $cc-co-dialog-header-border-style;
        border-width: $cc-co-dialog-header-border-width;
      }
      .dialog-close-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: $cc-co-dialog-header-close-button-size;
        height: $cc-co-dialog-header-close-button-size;
        border-radius: 5px;
        position: absolute;
        right: $cc-co-dialog-header-close-button-right;
        top: $cc-co-dialog-header-close-button-top;
        background: $cc-co-dialog-header-close-button-background-color;
      }
    }
    .dialog-content {
      font-family: $cc-co-dialog-content-font-family;
      font-size: $cc-co-dialog-content-font-size;
      padding: $cc-co-dialog-content-padding;
      max-height: 80vh;
      overflow: auto;
      overscroll-behavior: contain; // prevent body to scroll when scrolled to the end
    }
    .dialog-footer {
      font-family: $cc-co-dialog-footer-font-family;
      font-size: $cc-co-dialog-footer-font-size;
      padding: $cc-co-dialog-footer-padding;
      margin: $cc-co-dialog-footer-margin;
      border-style: $cc-co-dialog-footer-border-style;
      border-width: $cc-co-dialog-footer-border-width;
      co-button ::ng-deep {
        cursor: pointer;
        &.ok-click  {
          co-icon {
            svg {
              path {
                fill: #5FDCB3;
              }
            }
          }
        }
        &.cancel-click {
          co-icon {
            svg {
              path {
                fill: #6b6e8a;
              }
            }
          }
        }
      }
    }
    .dialog-close-button {
      cursor: pointer;
    }
  }
  .disable-scroll {
    pointer-events: none;
  }
}
