@import 'scss/variables';

$appsWidth: 21rem;

.appsShortcutContainer {
  max-height: 35rem;
  overflow-y: auto;

  // scrollbar-width: thin;
  border-radius: 0.8em;
  padding: 1.2em;
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-auto-rows: 100px;
  gap: 10px;
  place-items: center;

  @include themed {
    background: t($modal-secondaryColour);
  }

  .noAppsContainer {
    grid-column: 1/3;

    h3 {
      margin: 0;
      display: flex;
      align-items: center;
    }

    svg {
      font-size: 30px;
      margin-left: 10px;
    }
  }
}

.appsIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-decoration: none;
  padding: 10px;
  border-radius: 0.8em;
  cursor: pointer;
  width: 5rem;
  height: 4.7rem;
  transition: 0.5s;

  img {
    border-radius: 0.6rem;
  }

  span {
    display: inline-block;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    margin-top: 10px;
  }

  &:hover {
    span {
      white-space: initial;
    }

    height: max-content;
  }

  @include themed {
    color: t($color);

    &:hover {
      background: t($modal-sidebarActive);
    }
  }
}
