@import '../variable.less';

@files-header-height: 50px;
@files-fixed-body-height: 305px;
@files-item-content-height: 48px;
@files-item-name-width: 50%;
@files-item-size-min-width: 40px;
@files-item-size-font-size: 12px;
@files-item-action-width: 190px;
@file-padding: 24px;

@bixi-files-prefix-cls: bixi-files;

.@{bixi-files-prefix-cls} {
  &-container {
    background: @bixi-files-container-background;
    border-radius: 2px;

    &-bordered {
      box-shadow: 0 1px 5px 0 rgba(45, 47, 51, 0.1);

      .@{bixi-files-prefix-cls}-item .ant-progress-inner {
        background-color: #f5f5f5;
      }
    }

    &-fixed {
      .@{bixi-files-prefix-cls}-body {
        height: @files-fixed-body-height;
      }
    }
  }

  &-header {
    display: flex;
    align-items: center;
    height: @files-header-height;
    padding-left: @file-padding;
    font-weight: 400;
    border-bottom: 1px solid #f0f0f0;
  }

  &-footer {
    padding: 0 @file-padding;
    line-height: 64px;
  }

  &-body {
    overflow-y: auto;
  }

  &-item {
    display: flex;
    flex-direction: column;
    color: #000;
    cursor: pointer;

    .ant-progress-inner {
      background-color: transparent;
    }

    .anticon-close {
      color: @bixi-files-gray-color;
    }

    .anticon-check-circle {
      color: @bixi-files-success-color;
    }

    .anticon-close-circle,
    .anticon-lock {
      color: @bixi-files-error-color;
    }

    &:hover {
      background-color: @bixi-files-item-size-background;
    }

    &-delete {
      display: none;
    }

    &-operations {
      display: inline-block;
    }

    &-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: @files-item-content-height;
      padding: 0 @file-padding * 2 0 @file-padding;
    }

    &-name {
      width: @files-item-name-width;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      > label {
        padding-right: 8px;
      }
    }

    &-size {
      min-width: @files-item-size-min-width;
      padding: 0 8px;
      font-size: 12px;
      text-align: center;
      background: @bixi-files-item-size-background;
      border-radius: 2px;
    }

    &-progress,
    .ant-progress-line {
      line-height: 2px;
    }

    &-action {
      display: flex;
      align-items: baseline;
      justify-content: flex-end;
      width: @files-item-action-width;
      font-size: 14px;
      text-align: right;
    }

    &-icon-close {
      display: none;
    }

    &-icon-edit {
      padding-right: 8px;
      color: @bixi-files-gray-color !important;
      cursor: pointer;
    }

    &-edit {
      display: flex;
      align-items: center;

      > input {
        width: 110px;
        height: 24px;
        margin-right: 16px;
      }

      &-operations {
        display: flex;
        justify-content: space-between;
        padding-left: 5px;
        font-size: 12px;

        > a {
          width: 28px;
        }

        > a:first-child {
          margin-right: 8px;
        }
      }
    }

    .@{bixi-files-prefix-cls}-item-edit-mismatch {
      border-color: @bixi-files-error-color;
    }
  }

  &-item-show-delete {
    &:hover {
      .@{bixi-files-prefix-cls}-item-delete {
        display: inline-block;
      }

      .@{bixi-files-prefix-cls}-item-operations {
        display: none;
      }
    }
  }
}