.builder-wrapper {
  height: 100vh;
  overflow: hidden;
  background-color: var(--mat-sys-surface);
  .sidebar-drawer {
    width: 60px;
    visibility: visible !important;
    transform: none !important;
    display: block;
    border-right: 0;
    --mat-sys-corner-large: 0;
    ::ng-deep {
      > .mat-drawer-inner-container {
        overflow: hidden;
        display: block;
      }
    }
    &.mat-drawer-opened {
      width: 200px;
    }
    &.opened {
      box-shadow: 1px 1px 6px 0px rgb(48 48 48 / 20%);
      transition: box-shadow 0.1s ease-in;
    }
    &.closed {
      box-shadow: 1px 1px 6px 0px rgb(48 48 48 / 50%) !important;
      transition: box-shadow 0.1s ease-out;
    }
  }
  .drawer-content {
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-property: transform, padding-left;
    &:not(.opened) {
      padding-left: 60px;
    }
    &.opened {
      padding-left: 0;
      margin-left: 200px;
    }
  }
  &.dark {
    ::ng-deep {
      .builder-toolbar,
      .mat-drawer.sidebar {
        --mat-sys-surface: #424242;
        --mat-sys-on-surface: #fff;
        --mat-sys-primary: #fff;
        --mat-sys-on-surface-variant: #fff;
        --mat-sys-surface-container: #303030;
        --mat-sys-background: #303030;
      }
    }
  }
}

.mat-drawer {
  &.json-setting {
    ::ng-deep {
      .ace_editor {
        min-height: 85vh;
      }
    }
  }
}

.right-header {
  @apply flex justify-between gap-3 items-center px-5 box-border;
  height: 50px;
  border-bottom: 1px solid var(--mat-sys-surface-dim);
}
.right-content {
  @apply p-5;
}
