@import (reference) '../../style/themes/index.less';

/* stylelint-disable no-duplicate-selectors */
@pro-card-prefix-cls: ~'@{ant-prefix}-pro-card';
@card-hoverable-hover-border: transparent;

.@{pro-card-prefix-cls} {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: @component-background;
  border-radius: @card-radius;

  &-border {
    border: @border-width-base @border-style-base @border-color-split;
  }

  &-hoverable {
    cursor: pointer;
    transition: box-shadow 0.3s, border-color 0.3s;

    &:hover {
      border-color: @card-hoverable-hover-border;
      box-shadow: @card-shadow;
    }
  }

  &-size-small {
    .@{pro-card-prefix-cls} {
      &-header {
        padding: @card-head-padding-sm @card-padding-base-sm;
        padding-bottom: 0;

        &-border {
          & {
            padding-bottom: @card-head-padding-sm;
          }
        }
      }

      &-title {
        font-size: @card-head-font-size-sm;
      }

      &-body {
        padding: @card-padding-base-sm;
      }
    }
  }

  &-ghost {
    background-color: transparent;

    > .@{pro-card-prefix-cls} {
      &-header {
        padding-right: 0;
        padding-bottom: @card-head-padding;
        padding-left: 0;
      }

      &-body {
        padding: 0;
        background-color: transparent;
      }
    }
  }

  &-split > &-body {
    padding: 0;
  }

  &-split-vertical {
    border-right: @border-width-base @border-style-base @border-color-split;
  }

  &-split-horizontal {
    border-bottom: @border-width-base @border-style-base @border-color-split;
  }

  &-contain-card > &-body {
    display: flex;
    flex-direction: row;
  }

  &-contain-card > &-body-column {
    flex-direction: column;
  }

  &-collapse {
    > .@{pro-card-prefix-cls} {
      &-header {
        padding-bottom: @card-head-padding;
        border-bottom: 0;
      }

      &-body {
        display: none;
      }
    }
  }

  &-header {
    display: flex;
    justify-content: space-between;
    padding: @card-head-padding @card-padding-base;
    padding-bottom: 0;

    &-border {
      & {
        padding-bottom: @card-head-padding;
      }

      border-bottom: @border-width-base @border-style-base @border-color-split;
    }
  }

  &-title {
    font-size: @card-head-font-size;

    &-collapsible {
      cursor: pointer;
    }
  }

  &-type-inner {
    .@{pro-card-prefix-cls}-header {
      background-color: @background-color-light;
    }
  }

  &-collapsible-icon {
    margin-right: 8px;
    color: @icon-color-hover;

    & svg {
      transition: transform @animation-duration-base;
    }
  }

  &-title {
    font-weight: 500;
  }

  &-body {
    display: block;
    box-sizing: border-box;
    height: 100%;
    padding: @card-padding-base;

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

.loop-grid-columns(@index) when (@index > 0) {
  .@{pro-card-prefix-cls}-span-@{index} {
    flex-grow: 0;
    width: percentage((@index / @grid-columns));
  }
  .loop-grid-columns((@index - 1));
}

.@{pro-card-prefix-cls}-span-0 {
  display: none;
}

.loop-grid-columns(@grid-columns);
