@use 'mixins/amixin' as *;
.backdrop {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 200;
  background-color: var(--mat-sys-outline);
}
.showcase {
  position: absolute;
  width: 1000px;
  margin: 20px;
  z-index: 9999;
  left: 0;
  top: 0;
  padding-bottom: 60px;
  border-radius: 4px;
  background-color: var(--mat-sys-surface);
  overflow: hidden;
  > app-card-1v1 {
    ::ng-deep {
      > .card-1v1 {
        transform: none !important;
        max-height: 75vh;
        overflow: auto;
        box-shadow: none !important;
        @include scrollbar(var(--mat-sys-primary));

        > .components {
          padding: 0;
        }
        .title {
          margin-bottom: 0;
        }
        > .card-body {
          display: none;
        }
      }
      .component-toolbar {
        + app-spacer {
          display: block;
        }
      }
      .layout-builder {
        .block-toolbar,
        .layout-toolbar,
        .actions {
          display: none !important;
        }
        .layout {
          .placeholder {
            pointer-events: none;
          }
        }
      }
    }
  }
  .showcase-footer {
    position: absolute;
    z-index: 10;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    border-top: 1px solid var(--mat-sys-surface-container-low);
    background: var(--mat-sys-background);
    ::ng-deep {
      .mat-icon {
        color: var(--mat-sys-primary) !important;
      }
    }
  }
}
