@import url(~antd/lib/date-picker/style/index-pure.less);
@import '../../style/themes/index';
@import '../../style/mixins/index.less';
@import '../../input/style/mixin.less';

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

.@{picker-prefix-cls} {
	&-suffix,
	&-clear {
		color: @font-color-caption;
	}
	//重置部分样式

	display: inline-flex !important;
	box-shadow: none !important;
	.input-base();

	width: unset; //因为inputbasewidth存在100%

	padding: 0 !important;
	padding-right: 8px !important;

	//hover时clear的背景色

	&-range &-clear {
		right: 8px;
	}

	&-clear {
		background-color: transparent;
		right: 0px;
		&::after {
			content: '';
			width: calc(100% + 4px);
			height: calc(100% + 4px);
			background: @component-background-hover;
			border-radius: 100%;
			position: absolute;
			top: -2px;
			left: -2px;
			z-index: -1;
			opacity: 0;
			transition: all 0.3s ease-out;
		}
		&:hover {
			&:after {
				opacity: 1;
			}
		}
	}

	&:hover {
		.@{picker-prefix-cls}-clear {
			background-color: @picker-hover-bg;
		}
	}

	&-focused:hover {
		.@{picker-prefix-cls}-clear {
			background-color: @picker-bg;
		}
	}

	//disabled placeholder
	&-disabled {
		input::placeholder {
			color: @input-disabled-color;
		}
	}
	// ======================= borderless =======================

	&-borderless& {
		background-color: @picker-bg !important;
		border-color: @picker-bg!important;

		&:not(&-disabled):hover {
			background-color: @picker-hover-bg !important;
			border-color: @picker-hover-bg!important;
		}

		&:not(&-disabled):focus,
		&-focused:not(&-disabled) {
			&,
			&:hover {
				background-color: @picker-bg !important;
				border-color: @picker-focus-border-color!important;
			}
		}
	}

	// ======================= Dropdown =======================
	&-dropdown {
		.@{picker-prefix-cls}-panel-container {
			background-color: transparent;
			box-shadow: @shadow-3;
		}

		&-normal {
			background-color: @picker-dropdown-normal-bg;
		}

		&-range {
			padding: 0;
		}
	}

	&-date-panel,
	&-month-panel,
	&-year-panel {
		width: 308px;
	}

	&-week-panel {
		width: 344px;
	}

	&-quarter-panel {
		width: 402px;
	}

	&-date-panel &-content {
		width: 276px;
	}

	&-month-panel &-content,
	&-year-panel &-content {
		width: 282px;
		height: 224px;
	}

	&-quarter-panel &-content {
		width: 376px;
	}

	&-week-panel &-content {
		width: 312px;
	}

	&-date-panel &-body,
	&-week-panel &-body {
		padding: @picker-body-padding;
	}

	&-month-panel &-body,
	&-year-panel &-body,
	&-quarter-panel &-body {
		padding: @picker-month-body-padding;
	}

	&-header {
		padding: @picker-dropdown-header-padding;
		height: @picker-dropdown-header-height;
		border-bottom-color: @gray-10-hover;

		& > button {
			min-width: 16px;

			.@{icon-prefix-cls} {
				position: relative;
				width: 16px;
				font-size: @iconfont-size-sm;
				color: @font-color-caption;
				&::before {
					position: absolute;
					content: '';
					display: block;
					width: 24px;
					height: 24px;
					background-color: @picker-dropdown-normal-hover-bg;
					border-radius: @border-radius-base;
					z-index: -1;
					top: -4px;
					left: -4px;
					opacity: 0;
					transition: all 0.3s;
				}
				&:hover {
					&::before {
						opacity: 1;
					}
				}
			}
		}

		button {
			line-height: @picker-dropdown-header-height;
		}

		&-prev-btn {
			margin-left: 8px;
		}

		&-next-btn {
			margin-right: 8px;
		}

		&-view {
			font-family: Helvetica-Bold;
			letter-spacing: 0.4px;
			line-height: @picker-dropdown-header-height;
			font-weight: 600;
		}
	}

	&-body {
		thead th {
			color: @font-color-caption;
			line-height: @layout-height-5;
		}
	}

	&-panel &-footer {
		border-bottom: none;
		border-top-color: @picker-line-color;
	}

	&-footer &-ranges {
		box-sizing: content-box;
		padding: @padding-xs @padding-md;
		line-height: @layout-height-3;
		height: @height-xs;
		.@{picker-prefix-cls}-now-btn {
			.typography-paragraph-4();
			color: @cloud-gray-70;
		}
	}

	//date下的cell样式
	&-cell &-cell-inner {
		min-width: @picker-cell-inner-size;
		height: @picker-cell-inner-size;
		width: @picker-cell-inner-size;
		line-height: @picker-cell-inner-size;
	}

	//月份年份季度下的cell的样式
	&-month-panel &-cell,
	&-year-panel &-cell,
	&-quarter-panel &-cell {
		padding: 10px 0;
		height: 56px;
	}

	&-year-panel &-cell &-cell-inner,
	&-month-panel &-cell &-cell-inner,
	&-quarter-panel &-cell &-cell-inner {
		width: 84px;
	}

	&-bdesign &-cell::before {
		height: @picker-cell-inner-size;
	}

	// ======================= Range =======================

	&-range.@{picker-prefix-cls}-focused &-active-bar {
		opacity: 0;
	}

	// ======================= size =======================

	&-input > input {
		.bd-input-md();
	}

	&-small {
		.@{icon-prefix-cls} {
			font-size: @input-icon-size-sm;
		}
	}

	&-small &-input > input {
		.bd-input-sm();
	}

	&-xs &-input > input {
		.bd-input-xs();
	}

	&-large &-input > input {
		.bd-input-lg();
	}

	&-large {
		padding-right: 12px !important;
		.@{icon-prefix-cls} {
			font-size: @input-icon-size-lg;
		}
	}
	&-large&-range &-clear {
		right: 12px;
	}
	&-large&-range &-range-separator {
		padding: 0 12px;
	}
}

@import './panel';