@import "../../core/buttons/_buttons.less";


/**
 * 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));

  @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;

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

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

    >i {
      color: @gray-30;
      margin-bottom: 4px;
    }

    &:hover,
    &:focus {
      box-shadow: inset 0 0 0 1px @component-color-focus;
      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;
  }

}