@import '../../style/themes/index';
@import '../../style/mixins/index';

@m-file-display-prefix-cls: m-file-display;

.@{m-file-display-prefix-cls} {
  &-container {
    margin-right: @file-display-container-margin;
    margin-left: @file-display-container-margin;
    background: @file-display-container-background;
    border-radius: @border-radius-base;
    box-shadow: @file-display-box-shadow;
  }

  &-header {
    display: flex;
    align-items: center;
    height: @file-display-header-height;
    padding-left: @file-display-header-padding-left;
    font-weight: @file-display-header-font-weight;
    color: @file-display-header-color;
    border-bottom: @file-display-header-border-bottom;
  }

  &-body {
    height: @file-display-body-height;
    overflow-y: auto;
  }

  &-clear {
    padding-left: @file-display-clear-padding-left;
    font-size: @file-display-clear-font-size;
    color: @file-display-clear-color;
    cursor: pointer;
  }
  &-clear::after {
    display: block;
    margin-top: -2px;
    content: '';
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }

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

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

    &-name {
      width: @file-display-item-name-width;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      > label {
        padding-right: @padding-xs;
      }
    }

    &-size {
      min-width: @file-display-item-size-min-width;
      padding: @file-display-item-size-padding;
      font-size: @file-display-item-size-font-size;
      color: @file-display-item-size-color;
      text-align: center;
      background: @file-display-item-size-background;
      border-radius: @border-radius-base;
    }

    &-progress {
      line-height: @file-display-item-progress-line-height;
      .ant-progress-line {
        line-height: @file-display-item-progress-line-height;
      }
    }

    &-icon-container {
      display: flex;
      align-items: baseline;
      justify-content: flex-end;
      width: @file-display-item-icon-container-width;
      text-align: right;
    }

    &-icon-close {
      display: none;
    }

    &-icon-edit {
      padding-right: @padding-xs;
      cursor: pointer;
    }

    &-edit {
      display: flex;
      align-items: center;
      > input {
        width: 110px;
        height: 24px;
        margin-right: @margin-md;
      }

      &-operations {
        display: flex;
        > a {
          width: 28px;
        }
        > a:first-child {
          margin-right: @margin-xs;
        }
      }

      &-mismatch {
        border-color: red;
      }
    }
  }

  &-item:hover {
    background-color: @file-display-item-size-background;
  }

  &-footer {
    line-height: @file-display-footer-line-height;
  }
}