.gui-codearea-dialog-panel {
  --rnd-dialog-container-color: var(--mat-dialog-container-color, var(--mat-sys-surface, white));
}

.gui-codearea-dialog {
  --mat-button-outlined-label-text-size: 0.75rem;
  --mat-button-outlined-container-height: 1.5rem;
  --mat-button-outlined-horizontal-padding: 0.75rem;
  --mat-button-outlined-touch-target-display: none;
  --mat-button-filled-label-text-size: 0.75rem;
  --mat-button-filled-container-height: 1.5rem;
  --mat-button-filled-horizontal-padding: 0.75rem;
  --mat-button-filled-touch-target-display: none;

  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  font-size: 0.75rem;
}

.gui-codearea-dialog-header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem;
  cursor: grab;
  border-bottom: 1px solid rgba(0, 0, 0, 0.24);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.24);

  &.dragging {
    cursor: grabbing;
  }
}

.gui-codearea-dialog-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gui-codearea-dialog-spacer {
  flex: 1;
}

.gui-codearea-dialog-content {
  position: relative;
  flex: 1;
  overflow: auto;

  .code-editor {
    height: 100%;
    overflow: auto;
    border: 1px solid transparent;
  }

  &:hover {
    .gui-codearea-btns {
      display: block;
    }
  }
}
