@import url(~antd/lib/card/style/index-pure.less);
@import '../../style/themes/index';
@import (reference) '../../style/mixins/index.less';

@icon-prefix-cls: ~'@{ant-prefix}-icon';

.@{card-prefix-cls} {
	border-radius: @card-border-radius;
	box-shadow: @card-box-shadow;
	overflow: hidden;
	&:hover {
		box-shadow: @card-big-shadow;
		transition: box-shadow @animation-duration-base @ease-in-out;
	}

	//shaodw2
	&-secondary-shadow {
		box-shadow: @card-big-shadow;
		&:hover {
			box-shadow: @card-big-shadow-hover;
			transition: box-shadow @animation-duration-base @ease-in-out;
		}
	}

	&-none {
		box-shadow: none;

		&:hover {
			box-shadow: @card-big-shadow;
			transition: box-shadow @animation-duration-base @ease-in-out;
		}
	}

	&-nocover {
		padding-top: @padding-sm;
	}

	&-head {
		border-bottom: 0;
		padding: @card-header-padding;
		position: relative;
		min-height: 36px;
		// .get-var(headline1, font-size);
	}

	&-head-title,
	&-extra {
		padding: 0;
		a {
			color: @blue-base;
		}
	}

	&-head-title,
	&-meta-title {
		line-height: @layout-height-3;
		font-size: @font-size-base;
	}

	&-head-description,
	&-meta-description {
		.typography-paragraph-4();
		color: @font-color-caption;
	}

	&-body {
		padding: @card-body-padding;
		position: relative;

		p {
			line-height: calc(@layout-height-2 + 2px);
			font-size: @font-size-sm;
		}
	}

	// 当没有底部行动点时底边距为36
	&&-noaction &-body {
		padding-bottom: 24px;
	}

	//当没有body时body padding为0
	&&-nobody &-head {
		padding-top: 4px;
		padding-bottom: 16px;
	}

	//只有meat时
	&&-onlymeta &-body {
		padding-top: 4px;
		padding-bottom: 4px;
		.@{card-prefix-cls}-meta {
			margin-top: 0;
		}
	}

	//contain-grid时body没有padding
	&&-contain-grid {
		padding-top: 0 !important;
	}
	&&-contain-grid &-body {
		padding-bottom: 0 !important;
	}

	&-actions {
		border-top: 0;
		padding: 0 @padding-lg;
		padding-bottom: @padding-lg;
		position: relative;
		border-bottom-left-radius: @card-border-radius;
		border-bottom-right-radius: @card-border-radius;

		& > li {
			margin: 0;
		}

		& > li > span > .@{icon-prefix-cls} {
			font-size: @iconfont-size-base;
			color: @font-color-caption;

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

		.card-action-slash {
			min-width: 16px;
			position: absolute;
			right: -16px;
			top: 2px;
			display: none;
			color: @border-color-base !important;
		}

		& > li:not(:last-child) {
			border-right: 0;
			position: relative;
			.card-action-slash {
				display: block;
			}
		}
	}

	&-actions-right > li {
		width: unset !important;
		text-align: right;
		margin-left: @margin-xs;
	}

	&-actions-left > li {
		width: unset !important;
		text-align: left;
		margin-right: @margin-xs;
	}

	&-actions-justify > li:first-child {
		.@{icon-prefix-cls} {
			text-align: left;
			padding-left: @padding-xs;
		}
		.card-action-slash {
			right: 0;
		}
	}

	&-actions-justify > li:last-child {
		.@{icon-prefix-cls} {
			text-align: right;
			padding-right: @padding-xs;
		}
	}

	// 只有两个按钮是宽度充满且中间没有分割线
	&-actions-center {
		& > li:not(:last-child) {
			border-right: 0;
		}

		& > li {
			width: calc(50% - 4px) !important;
			button {
				width: 100%;
			}
		}

		& > li:last-child {
			margin-left: 8px;
		}
	}

	//meta
	& &-cover {
		width: 100%;
		margin-bottom: 12px;
		position: relative;
	}

	//正方型的图片框
	& &-cover&-cover-square {
		padding-top: 100%;
	}
	//4:3的图片框
	& &-cover&-cover-rectangle {
		padding-top: calc(100% * 3 / 4);
	}

	//16:9的图片框
	& &-cover&-cover-longrectangle {
		padding-top: calc(100% * 9 / 16);
	}

	& &-cover &-covercontant {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		img,
		video {
			width: 100%;
			height: 100%;
		}
	}

	//img填充方式
	& &-cover-fill img {
		object-fit: cover;
	}

	& &-cover-contain img {
		object-fit: contain;
	}

	// 填充纹理
	&-covercontant&-bg-pattern {
		background: url(https://img.alicdn.com/imgextra/i1/O1CN01k8nKYN1lk614RXzlk_!!6000000004856-2-tps-320-180.png)
			repeat;
	}

	&-bordered {
		box-sizing: border-box;
		box-shadow: none;
		&:hover {
			border-color: @cloud-gray-30;
			box-shadow: none;
			transition: border @animation-duration-base @ease-in-out;
		}
	}

	&-bordered:not(&-horizontal) {
		overflow: visible;
	}

	&-bordered:not(&-horizontal) &-cover {
		margin-bottom: 12px;
		margin-left: -1px;
		margin-top: -1px;
		margin-right: 0;
		width: calc(100% + 2px);
	}

	&-meta {
		margin-bottom: 12px;
		position: relative;
	}

	&-meta-avatar {
		margin-top: 6px;
		.@{ant-prefix}-avatar {
			width: 36px;
			height: 36px;
			line-height: 36px;
		}
	}

	&-meta&-hasline {
		padding-bottom: 16px;

		&:after {
			content: '';
			height: 1px;
			width: calc(100% + 48px);
			position: absolute;
			background-color: @border-color-base;
			bottom: 0;
			left: -24px;
		}
	}

	&-meta-extra {
		position: absolute;
		right: 0;
		top: 0;

		.@{ant-prefix}-btn + .@{ant-prefix}-btn {
			&::after {
				content: '';
				width: 1px;
				height: @layout-height-2;
				background: @border-color-base;
				position: absolute;
				left: -8px;
			}
		}
	}

	&-meta-description:not(&-nocover &-meta-description) {
		margin-top: 0;
	}

	&-meta-detail &-meta-title {
		margin-bottom: 0 !important;
	}

	// card-horizontal
	&-horizontal {
		display: flex;
		padding: 12px 0 24px;
		position: relative;
	}

	&-horizontal &-cover {
		padding: 0 !important;
		margin-left: 24px;
		margin-bottom: 0px;
		margin-top: 12px;
		border-radius: @card-border-radius;
		overflow: hidden;
	}

	// 正方型的图片框
	&&-horizontal &-cover&-cover-square {
		height: 180px;
		width: 180px;
	}

	// 4:3的图片框
	&&-horizontal &-cover&-cover-rectangle {
		height: 180px;
		width: 240px;
	}

	// 16:9的图片框
	&&-horizontal &-cover&-cover-longrectangle {
		height: 180px;
		width: 320px;
	}

	&-horizontal &-body {
		padding-bottom: 0;
	}

	&-horizontal &-actions {
		padding-bottom: 0;
		padding-left: 16px;

		li {
			margin: 0;
		}
	}

	&-horizontal &-content-right {
		flex: 1;
	}
	&-horizontal &-content-right &-body {
		padding-left: 16px;
	}

	// 其他样式有蓝色背景的样式
	&-with-bg {
		background: @blue-base;
	}

	&-with-bg &-body,
	&-with-bg &-body p,
	&-with-bg &-meta-title,
	&-with-bg &-meta-description,
	&-with-bg &-actions .@{icon-prefix-cls} {
		color: @white;
	}

	&-with-bg &-actions {
		background: transparent;
	}
	&-with-bg &-actions .@{icon-prefix-cls} {
		opacity: 0.8;
	}
	&-with-bg &-actions > li > span > .@{icon-prefix-cls}:hover {
		color: @white;
		opacity: 1;
	}

	&-bg-cover {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;

		img {
			object-fit: fill;
			width: 100%;
			height: 100%;
		}
	}

	//loading状态cover
	&-loading &-cover {
		background-image: linear-gradient(-45deg, @cloud-gray-10 0%, @gray-15 100%);
	}
	&-loading-block {
		background: linear-gradient(90deg, @gray-10 0%, @gray-05 100%);
		background-size: 600% 600%;
	}
}

.@{card-prefix-cls}-small {
	.@{card-prefix-cls}-body {
		padding-top: 8px;
	}
	.@{card-prefix-cls}-actions {
		.@{iconfont-css-prefix} {
			font-size: @iconfont-size-sm;
		}
	}
}