@import '../../style/themes/default.less';

.ele-file-list-group {
  position: relative;
  user-select: none;

  /* 复选框 */
  .ele-file-icon-check {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    display: inline-block;
    border: 1px solid @border-color-base;
    background: @component-background;
    box-sizing: border-box;
    transition: all 0.3s;
    position: relative;
    cursor: pointer;

    &:hover {
      border-color: @primary-color;
    }

    &:before {
      content: '';
      width: 5.71428571px;
      height: 9.14285714px;
      display: table;
      border: 2px solid #fff;
      border-top: 0;
      border-left: 0;
      transform: rotate(45deg) scale(0) translate(-50%, -50%);
      opacity: 0;
      transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      left: 21.5%;
    }

    &.checked {
      background: @primary-color;
      border-color: @primary-color;

      &:before {
        transform: rotate(45deg) scale(1) translate(-50%, -50%);
        opacity: 1;
        transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
      }
    }

    &:after {
      content: '';
      width: 8px;
      height: 8px;
      display: table;
      transform: translate(-50%, -50%) scale(1);
      opacity: 0;
      transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      left: 50%;
    }

    &.indeterminate:after {
      background: @primary-color;
      opacity: 1;
    }
  }

  /* 鼠标选择框 */
  .ele-file-list-selector {
    display: none;
    position: absolute;
    box-sizing: border-box;
    background: @file-list-selector-background;
    border: 1px solid @file-list-selector-border-color;
    z-index: @file-list-selector-z-index;
  }
}

/* 网格布局 */
.ele-file-list {
  position: relative;
  box-sizing: border-box;

  // header
  .ele-file-list-header {
    padding: 0 16px;
    border-bottom: 1px solid @border-color-split;
    box-sizing: border-box;
    line-height: 36px;
    display: flex;

    // 全选框
    .ele-file-list-check-group {
      display: inline-flex;
      align-items: center;
      cursor: pointer;

      .ele-file-list-check {
        margin-right: 14px;
      }
    }
  }

  // body
  .ele-file-list-body {
    padding: 14px 14px 0 0;
  }

  /*  item */
  .ele-file-list-item {
    width: 110px;
    padding: 6px 4px;
    margin: 0 0 14px 14px;
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid transparent;
    transition: all 0.3s;
    border-radius: 6px;
    text-align: center;
    position: relative;
    cursor: pointer;

    // 图标
    .ele-file-list-item-icon {
      height: 84px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      & > img {
        width: 56px;
        height: 56px;
        border-radius: 2px;
        display: inline-block;
        pointer-events: none;
      }

      & > .ele-file-list-item-icon-image {
        width: 84px;
        height: 84px;
        object-fit: cover;
      }
    }

    // 标题
    .ele-file-list-item-title {
      margin-top: 4px;
      overflow: hidden;
      white-space: nowrap;
      word-break: break-all;
      text-overflow: ellipsis;
      box-sizing: border-box;
      transition: color 0.3s;

      &:hover {
        color: @primary-color;
      }
    }

    // 复选框
    .ele-file-list-item-check {
      border-radius: 50%;
      background: @component-background;
      transition: all 0.3s;
      position: absolute;
      top: 6px;
      right: 6px;
      opacity: 0;

      .ele-file-icon-check {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: block;
        opacity: 0.4;
      }
    }

    &:hover,
    &.active,
    &.checked {
      background: @file-list-item-active-background;

      .ele-file-list-item-check {
        opacity: 1;
      }
    }

    &.active,
    &.checked {
      border-color: @file-list-item-active-border-color;

      .ele-file-list-item-check .ele-file-icon-check {
        opacity: 1;
      }
    }
  }
}

/* 表头排序图标 */
.ele-file-list-table-item-sort {
  width: 8px;
  height: 12px;
  margin-left: 6px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;

  &:before,
  &:after {
    content: '';
    width: 0;
    height: 0;
    display: block;
    border: 4px solid @file-list-table-sort-color;
    border-left-color: transparent;
    border-right-color: transparent;
  }

  &:before {
    border-top-color: transparent;
    margin: -4px 0 4px 0;
  }

  &:after {
    border-bottom-color: transparent;
  }

  &.ele-file-list-sort-asc:before {
    border-bottom-color: @file-list-table-sort-active-color;
  }

  &.ele-file-list-sort-desc:after {
    border-top-color: @file-list-table-sort-active-color;
  }
}

/* 表格布局 */
.ele-file-list-table {
  position: relative;

  /* item */
  .ele-file-list-table-item {
    line-height: 44px;
    border-top: 1px solid @border-color-split;
    transition: all 0.3s;
    position: relative;

    .ele-file-list-table-item-body {
      display: flex;
      align-items: center;
    }

    &:first-child {
      border-top-color: transparent;
      margin-top: -1px;
    }

    &:last-child {
      border-bottom: 1px solid @border-color-split;
    }

    // 复选框
    .ele-file-list-table-item-check-group {
      width: 36px;
      padding-left: 16px;
      box-sizing: border-box;
      line-height: 0;
      flex-shrink: 0;
    }

    // 图标和标题
    .ele-file-list-table-item-name {
      display: flex;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      min-width: 110px;
      flex: 1;
    }

    .ele-file-list-table-item-icon {
      flex: 1;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .ele-file-list-table-item-icon-image {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      cursor: pointer;

      &:hover + .ele-file-list-table-item-title {
        color: @primary-color;
      }
    }

    .ele-file-list-table-item-title {
      padding-left: 10px;
      transition: color 0.3s;
      box-sizing: border-box;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: nowrap;
      overflow: hidden;
      cursor: pointer;

      &:hover {
        color: @primary-color;
      }
    }

    // 工具按钮
    .ele-file-list-table-item-tool-group {
      flex-shrink: 0;
      box-sizing: border-box;
      align-items: center;
      display: none;

      .ele-file-list-item-tool {
        font-size: 17px;
        margin-left: 16px;
        color: @primary-color;
        cursor: pointer;
      }
    }

    &:hover .ele-file-list-table-item-tool-group {
      display: flex;
    }

    // 自定义列
    .ele-file-list-table-item-col {
      padding: 0 10px;
      box-sizing: border-box;
    }
  }

  // header
  .ele-file-list-table-header .ele-file-list-table-item {
    line-height: 36px;

    .ele-file-list-table-item-name > div {
      overflow: hidden;
      white-space: nowrap;
      word-break: break-all;
      text-overflow: ellipsis;
    }

    .ele-file-list-table-item-name,
    .ele-file-list-table-item-col {
      transition: color 0.3s;
      cursor: pointer;

      &:hover {
        color: @primary-color;
      }
    }
  }

  // body
  .ele-file-list-table-body .ele-file-list-table-item {
    &:hover,
    &.active,
    &.checked {
      background: @file-list-item-active-background;
      border-color: @file-list-item-active-border-color;

      & + .ele-file-list-table-item {
        border-top-color: @file-list-item-active-border-color;
      }
    }
  }
}

/* 右键菜单 */
.ele-file-item-context-menu {
  min-width: 100px;
}