@root-entry-name: 'default';
@import (reference) '~infrad/es/style/themes/index.less';
@import (reference) '~infrad/es/list/style/index.less';

@pro-list-prefix-cls: ~'@{ant-prefix}-pro-list';

.@{pro-list-prefix-cls} {
  background-color: transparent;

  .@{ant-prefix}-pro-table-alert {
    margin-bottom: 16px;
  }

  .@{pro-list-prefix-cls}-row {
    border-bottom: 1px solid @border-color-split;

    &:last-child {
      border-bottom: none;
      .@{ant-prefix}-list-item {
        border-bottom: none;
      }
    }

    &:hover {
      background-color: rgba(0, 0, 0, 0.02);
      transition: background-color 0.3s;
      .@{ant-prefix}-list-item-action {
        display: block;
      }

      .@{ant-prefix}-list-item-extra {
        display: flex;
      }

      .@{pro-list-prefix-cls}-row-extra {
        display: block;
      }

      .@{pro-list-prefix-cls}-row-subheader-actions {
        display: block;
      }
    }

    &-card {
      margin: 8px 0;
      padding: 0 8px;

      &:hover {
        background-color: transparent;
      }

      .@{ant-prefix}-list-item-meta-title {
        flex-shrink: 9;
        margin: 0;
        line-height: 22px;
      }
    }

    &.@{pro-list-prefix-cls}-row-editable {
      .@{ant-prefix}-list-item {
        &-meta {
          &-avatar,
          &-description,
          &-title {
            padding: 6px 0;
          }
        }
        &-action {
          display: block;
        }
      }
    }

    &.@{pro-list-prefix-cls}-row-selected {
      background-color: @table-selected-row-bg;
      &:hover {
        background-color: @table-selected-row-bg;
      }
    }

    &.@{pro-list-prefix-cls}-row-type-new {
      animation: techUiListActive 3s;
    }

    &.@{pro-list-prefix-cls}-row-type-inline {
      .@{pro-list-prefix-cls}-row-title {
        font-weight: normal;
      }
    }

    &.@{pro-list-prefix-cls}-row-type-top {
      background-image: url('https://gw.alipayobjects.com/zos/antfincdn/DehQfMbOJb/icon.svg');
      background-repeat: no-repeat;
      background-position: left top;
      background-size: 12px 12px;
    }

    &-show-action-hover {
      .@{ant-prefix}-list-item-action,
      .@{ant-prefix}-pro-card-extra,
      .@{ant-prefix}-pro-card-actions {
        display: none;
      }
      &:hover {
        .@{ant-prefix}-pro-card-extra,
        .@{ant-prefix}-pro-card-actions {
          display: flex;
        }
      }
    }

    &-show-extra-hover {
      .@{ant-prefix}-list-item-extra {
        display: none;
      }
    }

    &-extra {
      display: none;
    }

    &-subheader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 44px;
      padding: 0 24px;
      color: @text-color-secondary;
      line-height: 44px;
      background: rgba(0, 0, 0, 0.02);

      &-actions {
        display: none;
      }

      &-actions > * {
        margin-right: 8px;

        &:last-child {
          margin-right: 0;
        }
      }
    }

    &-header {
      display: flex;
      flex: 1;
      justify-content: flex-start;
    }

    &-header-title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    &-header-option {
      display: flex;
    }

    &-checkbox {
      width: 16px;
      margin-right: 12px;
    }

    &-expand-icon {
      margin-right: 8;
      margin-right: 8px;
      color: @text-color-secondary;
      > .anticon > svg {
        transition: 0.3s;
      }
    }

    &-expanded {
      > .anticon > svg {
        transform: rotate(90deg);
      }
    }

    &-title {
      margin-right: 16px;
      word-break: break-all;
      cursor: pointer;
      &:hover {
        color: @primary-color-hover;
      }
    }

    &-content {
      position: relative;
      display: flex;
      flex: 1;
      flex-direction: column;
      margin: 0 32px;
    }

    &-subTitle {
      color: rgba(0, 0, 0, 0.45);
    }

    &-description {
      margin-top: 4px;
      word-break: break-all;
    }

    &-avatar {
      display: flex;
    }
  }

  .@{ant-prefix}-list-pagination {
    margin-bottom: @margin-lg;
  }

  .@{ant-prefix}-list {
    &-item {
      padding: 12px;
      cursor: pointer;
    }
  }

  .ant-list-vertical .ant-pro-list-row .@{ant-prefix}-list {
    &-header {
      padding: 0;
      border-bottom: none;
    }

    .@{ant-prefix}-list-item {
      width: 100%;
      padding: 12px 18px 12px 24px;

      &-meta-avatar {
        display: flex;
        align-items: center;
        margin-right: 8px;
      }
      &-action-split {
        display: none;
      }

      &-meta-title {
        margin: 0;
      }
    }
  }

  &-no-split {
    .@{pro-list-prefix-cls}-row {
      border-bottom: none;
    }
    .@{ant-prefix}-list .@{ant-prefix}-list-item {
      border-bottom: none;
    }
  }

  &-bordered {
    .@{pro-list-prefix-cls}-toolbar {
      border-bottom: 1px solid @border-color-split;
    }
  }

  .@{ant-prefix}-list-vertical {
    .@{pro-list-prefix-cls}-row {
      padding: 12px 18px 12px 24px;

      &-header-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
      }

      &-content {
        margin: 0;
      }

      &-subTitle {
        margin-top: 8px;
      }
    }

    .@{ant-prefix}-list-item-extra {
      display: flex;
      align-items: center;
      margin-left: 32px;
    }

    .@{pro-list-prefix-cls}-row-description {
      margin-top: 16px;
    }
  }

  .@{ant-prefix}-list-bordered .@{ant-prefix}-list-item {
    padding-right: 0;
    padding-left: 0;
  }
  .@{pro-list-prefix-cls}-row-show-extra-hover {
    .@{ant-prefix}-list-item-extra {
      display: none;
    }
  }
}

@keyframes techUiListActive {
  0% {
    background-color: unset;
  }
  30% {
    background: #fefbe6;
  }
  100% {
    background-color: unset;
  }
}