.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.justify-self-stretch {
  justify-self: stretch;
}
.justify-between {
  justify-content: space-between;
}
.flex-1 {
  flex: 1;
}
.w-full {
  width: 100%;
}
.hlxb-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 16px;
  position: relative;
}
.hlxb-grid .grid-item {
  --hover-color: #f0f0f0;
  transition: all 0.2s;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hlxb-grid .grid-item.horizontal {
  flex-direction: row;
  padding: 0 16px;
}
.hlxb-grid .grid-item.horizontal .nav-icon-container {
  flex-shrink: 0;
  margin-right: 12px;
}
.hlxb-grid .grid-item.horizontal .grid-item-content {
  width: unset;
  flex: 1;
  overflow: hidden;
  align-items: flex-start;
}
.hlxb-grid .grid-item.horizontal .grid-item-content .grid-item-text {
  margin: 0 0 calc(-0.5em / 2);
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  text-align: left;
}
.hlxb-grid .grid-item.horizontal .grid-item-content .grid-item-desc {
  margin-top: calc(8px - calc(0.5em / 2));
  text-align: left;
}
.hlxb-grid .grid-item.hover-show {
  cursor: pointer;
}
.hlxb-grid .grid-item.hover-show:hover {
  background-color: var(--hover-color);
}
.hlxb-grid .grid-item-icon {
  width: 44px;
  height: 44px;
}
.hlxb-grid .grid-item-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hlxb-grid .grid-item-desc,
.hlxb-grid .grid-item-text {
  font-size: 14px;
  max-width: 90%;
  text-align: center;
  line-height: 1.5em;
  margin-top: calc(12px - calc(0.5em / 2));
}
.hlxb-grid .grid-item-text.file-name {
  display: flex;
  align-items: center;
}
.hlxb-grid .grid-item-text.file-name .text {
  line-height: 1;
}
.hlxb-grid .grid-item-desc {
  font-size: 12px;
  color: #666;
}
.hlxb-grid .nav-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hlxb-grid .empty-container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hlxb-grid .text-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}