@use '../variables' as *;

.header {
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: var(--theme-item-sheet-bg);
  position: sticky;
  top: 0;
  z-index: 1;
}

.items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-grid-width, 250px), 1fr));
  gap: 4px;
}

.tile {
  // Don't scale up items even if users have item tiles set to large
  --item-size: 50px;
  display: grid;
  grid-template-columns: min-content auto min-content;
  grid-template-rows: max-content auto;
  grid-template-areas:
    'icon title corner'
    'details details details';
  border: 1px solid transparent;
  cursor: pointer;
  padding: 8px;
  gap: 8px;
  box-sizing: border-box;
  position: relative;

  @include interactive($hover: true) {
    background-color: rgb(255, 255, 255, 0.1);
  }
  &:focus-visible {
    border-color: var(--theme-accent-secondary);
    outline: none;
  }

  &.compact {
    grid-template-areas:
      'icon title corner'
      'icon details corner';
    row-gap: 4px;
  }

  > :global(.item) {
    grid-area: icon;
  }
}

.details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  grid-area: details;
  text-wrap: pretty;
}

.selected {
  border-color: var(--theme-accent-primary);
}

.disabled {
  opacity: 0.5;
  cursor: default;
}

.title {
  align-self: center;
  color: var(--theme-text);
  font-weight: bold;
  font-size: 16px;
  grid-area: title;
  text-wrap: balance;
}
