@use "../../../variables/index" as *;
@use "../../core/buttons/buttons" as *;


/**
 * dtm icon selector - Component styles
 *
 * Note: Uses $size-* tokens for spacing where applicable.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions: Fixed sizes for component layout
 * - Off-grid spacing: Component-specific positioning
 * - Border widths (1px, 2px, 3px): Standard borders
 * - Font-sizes: Typography
 * - Percentages: Layout
 */
.dtm-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: $size-4;
  @media(min-width: $screen-sm-min) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  @media(min-width: $screen-md-min) {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }


  &__item {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    position: relative;

    &--selected {
      >button {
        box-shadow: inset 0 0 0 2px $component-color-focus  !important;
      }
    }

    &--overridden, &:has(.dtm-icon-grid__actions .dlt-c8y-icon-pencil) {
      > button {
        outline: 1px dotted $component-border-color;
        outline-offset: -2px;
      }
    }

    .dtm-icon-grid__override-marker {
      position: absolute;
      top: 3px;
      left: 3px;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      font-size: 10px;
      line-height: 1;
      color: $tag--color-info;
      background-color: $tag--background-info;
      border: 1px solid $tag--color-info;
      border-radius: 50%;
    }

    .dtm-icon-grid__actions {
      opacity: 0;
      display: flex;
      pointer-events: none;
      position: absolute;
      top: 0;
      right: 0;
      gap: 2px;
      z-index: 1;
      transform: translate(-4px, -50%);
      transition: all .15s ease;
      @media (max-width: $screen-xs-max) {
        flex-direction: column;
        gap: 1px;
        right: 1px;
      }
      .btn-dot{
        background-color: $component-background-default;
        border-radius: 50%!important;
        border: 1px solid $component-border-color;
      }
    }

    &:hover,
    &:focus-within {
      .dtm-icon-grid__actions {
       
        opacity: 1;
        pointer-events: auto;
      }
      .dtm-icon-grid__btn{
        box-shadow: inset 0 0 0 1px $component-border-color;
        color: inherit;
      }
    }

  }

  &__btn {
    @include btn-clean();
    height: auto;
    white-space: normal;
    text-align: center;
    padding: $size-8;
    background: $component-background-default;
    width: 100%;
    border-radius: $size-8;

    >i {
      display: inline-block;
      width: 1.1em;
      height: 1.1em;
      line-height: 1;
      color: $gray-30;
      margin-bottom: 4px;
    }

    &:hover,
    &:focus {
      box-shadow: inset 0 0 0 1px $component-border-color;
      color: inherit;
    }

    &:active {
      box-shadow: inset 0 0 0 2px $component-color-focus;
    }
  }
}

.dtm-icon-display {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: $component-padding;

  &--undefined {
    border: 2px dashed $component-border-color;
  }

  .asset-type-icon {
    font-size: 64px;
  }

}