@use 'variable/breakpoint' as *;
@use 'mixins/amixin' as *;
.widget-picker {
  min-height: 360px;
  @apply w-[48px];
  .widget-wrapper {
    position: relative;
    background-color: var(--mat-sys-surface);
    box-shadow:
      0px 0.2px 0.6px rgba(0, 0, 0, 0.02),
      0px 0.4px 1.3px rgba(0, 0, 0, 0.028),
      0px 0.8px 2.5px rgba(0, 0, 0, 0.035),
      0px 1.3px 4.5px rgba(0, 0, 0, 0.042),
      0px 2.5px 8.4px rgba(0, 0, 0, 0.05),
      0px 6px 20px rgba(0, 0, 0, 0.07);
    .box {
      color: var(--mat-sys-primary);
    }
    .item {
      position: relative;
      .inner {
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
  .group-popup {
    position: relative;
    max-height: 60vh;
    overflow: auto;
    color: var(--mat-sys-on-surface);
    @include scrollbar(var(--mat-sys-outline));
    .item {
      border-color: var(--mat-sys-outline-variant);
      .mat-icon {
        color: var(--mat-sys-primary);
      }
      &:hover {
        background-color: var(--mat-sys-primary-fixed);
      }
    }
  }
  .widget-wrapper,
  .group-popup,
  .widget-popup {
    @apply rounded-[8px];
  }
  .group-popup,
  .widget-popup {
    background-color: var(--mat-sys-surface);
    border: 1px solid var(--mat-sys-surface-container-low);
    box-shadow: var(--mat-sys-level1);
  }
  .widget-popup {
    overflow: hidden;
    box-sizing: border-box;
    opacity: 0;
    @include scrollbar(var(--mat-sys-outline));
    @apply pointer-events-none;
    &[data-popper-placement] {
      display: flex;
      opacity: 1;
      @apply pointer-events-auto;
    }
    .hover-show {
      transform: scale(0.8);
      img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
      ::ng-deep {
        > app-dynamic-component {
          > app-spacer {
            background-color: var(--mat-sys-primary-fixed);
          }
        }
      }
    }
  }
  &:not(.show) {
    opacity: 0;
    position: fixed;
    @apply pointer-events-none;
  }
}
