.cdk-overlay-container {
  --mat-dialog-container-max-width: 80vw;
  .mat-mdc-dialog-container {
    overflow: visible;
    .mat-mdc-dialog-surface {
      overflow-y: visible;
      .dialog-colse-outside-btn {
        .mat-icon {
          color: #fff;
        }
      }
      .mat-mdc-dialog-content {
        max-height: 85vh;
      }
    }
  }
  .manage-media-dialog {
    .mat-mdc-dialog-content {
      max-height: none;
    }
  }

  .media-preview-dialog {
    img {
      width: revert;
      height: revert;
      min-width: 200px;
      min-height: 200px;
    }
  }

  .close-outside {
    &.close-icon-white {
      .dialog-colse-outside-btn {
        .mat-icon {
          color: #fff;
        }
      }
    }
  }

  .code-editor-dialog {
    width: 100vw !important;
    max-width: none !important;
    --mat-dialog-content-padding: 0;
    --mat-dialog-container-color: transparent;
    .mat-mdc-dialog-surface {
      border-radius: 0;
    }
    .dialog {
      .mat-mdc-dialog-content {
        overflow: hidden;
        border-radius: 20px 20px 0 0;
        max-height: none;
        background-color: var(--mat-sys-neutral10);
      }
      .monaco-editor,
      .monaco-editor-background,
      .monaco-editor .inputarea.ime-input {
        background-color: #282c34;
      }
      .monaco-editor {
        .margin {
          background-color: var(--mat-sys-neutral10);
        }
      }
      .toolbar {
        background-color: var(--mat-sys-neutral10);
      }
      .code-editor-show-btn {
        --mat-icon-button-icon-color: #fff;
      }
      .dialog-colse-outside-btn {
        top: 8px;
        right: 20px;
        z-index: 100;
        button {
          color: #fff;
        }
      }
      pre {
        white-space: break-spaces;
        word-break: break-all;
      }
    }
  }
  .login-dialog {
    .mat-mdc-dialog-content {
      padding: 0;
      .login-wrapper {
        @apply border-0;
        box-shadow: none;
      }
    }
  }
  .search-box-list {
    .mat-mdc-option .mdc-list-item__primary-text {
      white-space: nowrap;
    }
  }

  // btn icon
  .overlay-btn-icon {
    button {
      .mat-mdc-menu-item-text {
        display: flex;
        align-items: center;
        app-icon {
          .mat-icon {
            display: flex;
            position: relative;
            vertical-align: top;
            font-size: 18px;
            height: 18px;
            width: 18px;
          }
        }
      }
    }
  }

  .dialog-p-0 {
    .mat-mdc-dialog-container .mat-mdc-dialog-content {
      padding: 0;
    }
  }

  .widget-picker-dialog {
    .mat-mdc-dialog-container .mdc-dialog__content {
      color: rgba(0, 0, 0, 0.75);
    }
  }

  .page-preview-dialog {
    .dialog {
      height: 100%;
      .mat-mdc-dialog-content {
        max-height: none;
        height: 100%;
        overflow: hidden;
      }
    }
  }

  .layout-toolbar-menu {
    --mat-divider-color: var(--mat-sys-surface-variant);
    background-color: var(--mat-sys-inverse-surface);
    .mat-mdc-menu-item,
    .mat-mdc-menu-item:visited,
    .mat-mdc-menu-item:link,
    .mat-mdc-menu-item .mat-icon-no-color,
    .mat-mdc-menu-item .mat-mdc-menu-submenu-icon {
      color: var(--mat-sys-on-primary);
    }
    mat-divider {
      opacity: 0.1;
    }
  }
}
