@import 'mixins.less';

.ui-datepicker-trigger {
    cursor: pointer;
    vertical-align: middle;
}

#ui-datepicker-div {
    background-color: #007dc3;
    border: none;
    box-shadow: 1px 1px 5px 0px #555;
    display: none;
    width: 210px;
    z-index: 1000 !important;

	.ui-datepicker-header {
	    color: #e0e0e0;
	    color: white;
	    line-height: 18px;
	    padding: 8px 0 10px 0;
	    position: relative;
	    text-align: center;
	    .font(Medium, 18px);

	    .ui-datepicker-prev, .ui-datepicker-next {
		    cursor: pointer;
		    width: 40px;
		    height: 36px;
		    display: inline-block;
		    position: absolute;
		    top: 0;
		    &:hover {
		    	background-color: @hover-blue;
		    }
	    }

		.ui-datepicker-prev {
            .sprite(-250px, -130px);
            left: 0px;
		}

		.ui-datepicker-next {
            .sprite(-250px, -166px);
			right: 0px;
		}

		.ui-icon {
			background-repeat: no-repeat;
			display: block;
			overflow: hidden;
			text-indent: -99999px;
		}
	}

	table.ui-datepicker-calendar {
	    width: 100%;
	    border-collapse: collapse;

	    th {
	        background-color: #f2f2f2;
	        color: #666;
	        font-size: 11px;
	        line-height: 19px;
	        text-transform: uppercase;
	        .medium-font;
			border-bottom: 1px solid #bbb;
	    }

	    td {
	        background-color: #e5e5e5;
	        font-size: 14px;
	        height: 29px;
	        line-height: 29px;
	        text-align: center;
	        vertical-align: middle;
	        width: 29px;
	        .medium-font;
			border: 1px solid #bbb;
	        &.ui-datepicker-other-month, &.ui-state-disabled {
	        	color: #b4b3b3;
	        }

	        a {
	        	display: block;
	            color: #666666;
	            &.ui-state-default:hover, &.ui-state-active {
					background-color: #007dc3;
					color: #fff;
			    }
			}
	    }
	}
}

@media only screen and (max-width : @max-mobile-resolution) {
	#ui-datepicker-div {
		width: 100%;
		left: 0 !important;
		margin-top: 35px;

		.ui-datepicker-header {
			.font(Medium, 20px);

		    .ui-datepicker-prev span, .ui-datepicker-next span,
		    .ui-datepicker-prev, .ui-datepicker-next {
	  			background-image: none !important;
			}

			.ui-datepicker-prev:before, .ui-datepicker-next:before {
				.font(Medium, 17px);
				font-family: FontAwesome;
				position: absolute;
				top: 1px;
				right: 0;
				bottom: 0;
				left: 0;
				display: flex;
				font-weight: normal;
				align-items: center;
				justify-content: center;
			}

			.ui-datepicker-prev:before {
				content: "\f053";
			}

			.ui-datepicker-next:before {
				content: "\f054";
			}

		}

		table.ui-datepicker-calendar {
			th {
				.font(Medium, 14px);
	        	line-height: 33px;
	        	border-bottom: none;
			}

			td {
				.font(Medium, 16px);
				height: 38px;
				line-height: 38px;

				a, span {
		        	display: block;
					border: 1px solid #bbb;
			        background-color: #e5e5e5;
		        }
			}

			tbody {
				td {
					background-color: #f2f2f2;
					border: 0;
					padding: 1px;
				}
			}
		}
	}
}


@media only screen and (min-width: @max-mobile-resolution) and (max-width: @max-resolution) {

	#ui-datepicker-div {
	    width: 262px;

		.ui-datepicker-header {
		    line-height: 22px;
		    .font(Medium, 22px);

		    .ui-datepicker-prev, .ui-datepicker-next {
			    width: 40px;
			    height: 36px;
			    top: 0;
		    }
		}

		table.ui-datepicker-calendar {
		    width: 100%;

		    th {
		        font-size: 14px;
		        line-height: 24px;
		        text-transform: uppercase;
		        .medium-font;
				border-bottom: 1px solid #bbb;
		    }

		    td {
		        font-size: 17px;
		        height: 36px;
		        line-height: 36px;
		        width: 36px;
		        .medium-font;
				border: 1px solid #bbb;
		    }
		}
	}
}