%img {
  height: 100%;
  max-width: 7.5rem;
  object-fit: contain;
  border-radius: 0.25rem;
  background-color: var(
    --mat-option-hover-state-layer-color,
    color-mix(
      in srgb,
      var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
      transparent
    )
  );
}

.gui-image-select {
  --mat-form-field-container-vertical-padding: 0;

  .ng-select {
    padding: 0 0.5rem;
    margin: 0 -0.5rem;

    .ng-value-container {
      height: 4rem;
    }

    .ng-value {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      height: 100%;
      padding: 0.5rem 0;

      img {
        @extend %img;
      }
    }

    .ng-clear-wrapper .ng-clear {
      font-family: math;
      font-size: 12px;
    }

    .ng-arrow {
      vertical-align: -1px;
    }
  }

  &.ng-dropdown-panel {
    .ng-dropdown-panel-items {
      .ng-option {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        height: 4rem;
        padding: 0.5rem;

        img {
          @extend %img;
        }
      }
    }
  }
}
