.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();
    height: auto;
    white-space: normal;
    text-align: center;
    padding: @margin-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;
  }

}