/* Inventory © max, the murderer!
-------------------------------------------------- */

/* Блок инвентаря */
.inventory {
  justify-content: center;
 /* width: 600px;  Ширина блока */
  height: 50px; /* Высота блока */
  background: var(--fon6-1);
  padding: 20px;
  display: flex;
  /*flex-direction: column;*/
  gap: 14px; /* Расстояние между заголовком и предметами */
  border-radius: 8px;
}

/* Заголовок */
.inventory > strong {
  /* font: normal 700 1rem/100% tahoma, arial, verdana, trebuchet ms, sans-serif;
  color: rgba(255 255 255 / .74); */
  text-transform: uppercase;
}

/* Прокрутка с предметами */
.inventory .scrollable {
  display: flex;
  flex-flow: wrap;
  gap: 5px; /* Расстояние между предметами */
  /*overflow: hidden auto;overflow: visible auto;*/
  overflow-y: auto;
  overflow-x: visible;
  /* padding-right: 8px; */
  /* padding-bottom: 32px; */
  /* mask-image: linear-gradient(to top, transparent 0%, rgba(0 0 0) 32px);*/
}

/* Предметы */
.inventory .item {
  position: relative;
  flex-basis: calc(10% - 6px);  /*Ширина предметов в процентах за вычетом отступов между предметами */
  aspect-ratio: 1; /* Всегда квадратные предметы; вместо этого свойства можно указать фикс. ширину и высоту */
  padding: 8px; /* Отступы вокруг картинки внутри предмета*/
  border-radius: 8px;
  box-sizing: border-box;
  border: 1px solid rgba(179 179 179);
  background-color: var(--beg500);
  box-shadow: 0 0 9px inset #6b727d;
  transition: all .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}

/* Редкие */
.inventory .item.rare {
  border-color: rgba(69 182 252);
}

/* Эпические */
.inventory .item.epic {
  border-color: rgba(213 123 203);
}

/* Легендарные */
.inventory .item.legendary {
  border-color: rgba(220 184 95);
}

/* Предметы при наведении */
.inventory .item:hover {
  cursor: pointer;
  background-color: var(--border);
}

/* Картинки внутри предметов */
.inventory .item img {
  width: 40px; /* Автоматическая подстройка под размеры блока предмета */
}

/* Количество предмета */
.inventory .item::before {
  content: attr(data-quantity);
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: rgba(0 0 0);
  padding: 3px;
  min-width: 16px;
  box-sizing: border-box;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: normal 700 0.8rem/100% tahoma, arial, verdana, trebuchet ms, sans-serif;
  color: rgba(255 255 255 / .74);
}

.inventory .item[data-quantity="0"]::before,
.inventory .item[data-quantity="1"]::before {
  display: none; /* Прятать бейджики для 0 и 1 */
}

/* Отдельные настройки полосы прокрутки */
@supports selector(::-webkit-scrollbar) {
    .inventory ::-webkit-scrollbar-thumb {
        background: rgba(120 120 120);
        border-radius: 8px;
    }
    .inventory ::-webkit-scrollbar-thumb:hover {
        background: rgba(200 200 200);
        cursor: default;
    }
    .inventory ::-webkit-scrollbar-track {
        background: rgba(50 50 50);
        border-radius: 8px;
    }
    .inventory ::-webkit-scrollbar {
        max-width: 4px;
        max-height: 4px;
    }
}

/* Для мозиллы */
@supports not selector(::-webkit-scrollbar) {
    .inventory {
        scrollbar-width: thin;
        scrollbar-color: rgb(var(--dark900)) rgb(var(--secondary400));
    }
}

/* описание */
#inv-tooltip{
  position:fixed;
  background:#111;
  color:#fff;
  padding:6px 10px;
  font-size:12px;
  border-radius:6px;
  max-width:220px;

  pointer-events:none;
  opacity:0;

  transition:opacity .15s;

  z-index:99999;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}