@use '@/assets/css/constants' as constants;

[data-component=tools-store] {
  .search {
    display: flex;
    position: sticky;
    width: 100%;
    margin-top: 20px;
    top: 20px;
    z-index: 10;
    justify-content: center;
    transition: all 0.3s ease;

    > * {
      width: 80%;
    }

    &.hide {
      transform: translateY(-60px);
    }
  }

  .root-content {
    padding: 20px;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;

    > div {
      width: 180px;
      height: 290px;
      flex: 0 0 auto;
    }

    .no-tool {
      display: flex;
      justify-content: center;
      font-size: 1.4em;
      font-weight: bolder;
      color: constants.$font-secondary-color;
    }
  }

  .android-qrcode {
    align-items: center;
    transform: translateX(-16px);
    gap: 20px;
  }
}