@use 'effects';
.file-tiles {
  display: flex;
  flex-flow: row wrap;

  .file-item {
    display: grid;
    width: 250px;
    height: 60px;
    grid-template-columns: 1fr 30px;
    grid-template-rows: 1fr 1fr;
    margin: 6px;
    border: 1px solid var(--selectable-border-color);
    background: var(--selectable-bg);
    user-select: none;

    .file-item-body {
      grid-area: 1 / 1 / 3 / 2;
      padding: 4px 0 4px 12px;
      transition: all 0.1s ease-in-out;
      display: grid;
      grid-template-columns: 60px 1fr;
      grid-template-rows: 1fr 1fr;
      overflow: hidden;
      @include effects.hover-effect(var(--default-foreground-20), var(--default-foreground-40));

      .icon {
        grid-area: 1 / 1 / 3 / 2;
        vertical-align: center;
        align-self: center;
        text-align: center;
        font-size: 32px;
        overflow: hidden;
        justify-self: center;
        max-height: 60px;
        max-width: 60px;
        color: var(--primary-color-depth3);
      }

      .title,
      .detail {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        align-self: center;
        margin-left: 8px;
      }

      .title {
        grid-area: 1 / 2 / 2 / 3;
        font-size: 15px;
        color: var(--default-textcolor);
      }

      .detail {
        grid-area: 2 / 2 / 3 / 3;
        font-size: 12px;
        color: var(--minor-textcolor);
      }
    }

    .operate-button {
      grid-area: 1 / 2 / 2 / 3;
      font-size: 20px;
      display: flex;
      justify-content: center;
      transition: all 0.1s ease-in-out;
      align-items: center;
      color: var(--primary-color-depth3);
      @include effects.hover-effect(var(--default-foreground-20), var(--default-foreground-40));

      &.share {
        grid-area: 1 / 2 / 2 / 3;
      }

      &.download {
        grid-area: 2 / 2 / 3 / 3;
      }
    }
  }
}

.empty-notice {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
}
