// Bootstrap datepicker

.datepicker.datepicker-dropdown {
	padding: 10px;
	width: 25%;
	max-width: 320px;
	min-width: 250px;
	-webkit-box-shadow: $dropdown-box-shadow;
	box-shadow: $dropdown-box-shadow;

	.datepicker-days {
		padding: 0;

		table.table-condensed {
			width: 100%;

			thead {
				tr {
					th {
						text-align: center;
						padding: 0.5rem 0;

						&.prev {
							color: $body-color;
							padding-bottom: 1rem;
							padding-top: 1rem;
							background: $card-bg;
						}

						&.datepicker-switch {
							color: $body-color;
							background: $card-bg;
							padding-bottom: 1rem;
							padding-top: 1rem;
							font-size: 1rem;
							font-weight: 600;
						}

						&.next {
							color: $body-color;
							padding-bottom: 1rem;
							padding-top: 1rem;
							background: $card-bg;
						}

						&.dow {
							font-family: $type1;
							color: $body-color;
							font-size: 0.875rem;
							font-weight: initial;
						}
					}
				}
			}

			tbody {
				position: relative;
				top: 13px;

				td {
					text-align: center;

					&.day {
						font-size: 0.9375rem;
						padding: 0.5rem 0;
						color: $body-color;

						&:hover {
							background: lighten($card-bg, 10%);
						}

						&.active {
							color: #fff;
							background: transparent;
							position: relative;
							z-index: 1;
							text-shadow: none;

							&:before {
								content: "";
								width: 28px;
								height: 25px;
								background: theme-color(info);
								@include border-radius(2px);
								display: block;
								margin: auto;
								vertical-align: middle;
								position: absolute;
								top: 6px;
								z-index: -1;
								left: 0;
								right: 0;
							}
						}

						&.today {
							color: #fff;
							background: transparent;
							position: relative;
							z-index: 1;

							&:before {
								content: "";
								width: 28px;
								height: 25px;
								background: theme-color(primary);
								@include border-radius(2px);
								box-shadow: 3px 3px 6px 0 rgba(147, 127, 201, 0.2);
								-webkit-box-shadow: 3px 3px 6px 0 rgba(147, 127, 201, 0.2);
								-moz-box-shadow: 3px 3px 6px 0 rgba(147, 127, 201, 0.2);
								display: block;
								margin: auto;
								vertical-align: middle;
								position: absolute;
								top: 6px;
								z-index: -1;
								left: 0;
								right: 0;
							}
						}
					}

					&.old.day {
						color: darken(color(gray-lightest),4.5%);
					}

					&.new.day {}

				}
			}
		}
	}
}

.datepicker {
	> div {
		display: initial;
		padding: 0.375rem 0.75rem;
		margin-bottom: 0;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
		color: #495057;
		text-align: center;
		white-space: nowrap;
		border-radius: 2px;
	}

	&.input-group {
    padding: 0;
    border: 1px solid $border-color;
    .form-control {
      border: 0;
		}
    .input-group-addon {
      padding: 0 10px;
      border-left: 1px solid $border-color;
      @include display-flex;
      @include align-items(center);
      svg {
        width: 18px;
        color: $text-muted;
      }
    }
  }
}

.datepicker-dropdown {
	&:after {
		border-bottom-color: $dropdown-bg;
	}
	&:before {
		border-bottom-color: $border-color;
	}
	&.datepicker-orient-top {
		&:before,
		&:after {
			top: auto;
		}
		&:after {
			border-top-color: $dropdown-bg;
		}
		&:before {
			border-top-color: $border-color;
		}
	}
}

.rtl {
	.datepicker {
		direction: rtl;
		&.input-group {
			.input-group-addon {
				border-left: 1px solid transparent;
				border-right: 0;
			}
		}
	}
}