@import (once) "vars";
@import (once) "colors";
@import (once) "utils";

.calendar {
    min-width: 13.75rem;
    border: 1px @grayLighter solid;
    font-size: .75rem;
	padding: .3125rem;
	background-color: @white;

	.calendar-grid {
		margin: 0;
		padding: 0;
	}

	.calendar-row {
		margin: 0 0 .3125rem;
		width: 100%;
		.clear-float;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.calendar-cell {
		width: 12.46201429%;
		margin: 0 0 0 2.12765%;
		display: block;
		float: left;

		&:first-child {
			margin-left: 0;
		}

		&.sel-month {
			width: 41.64134286%;
		}

		&.sel-year {
			width: 48.936175%;
		}

		&.sel-plus, &.sel-minus {
			width: 23.4042625%;
		}

		&.month-cell, &.year-cell {
			width: 23.4042625%;
		}
	}

	.calendar-actions {
		.button {
			margin: .15625rem;
		}
	}

    .day-of-week {
        padding: .3125rem;
        cursor: default;
    }

    a {
        display: block;
        padding: .3125rem 0;

        &:hover {
            background-color: lighten(@cyan, 20%);
            color: @white;
			border-radius: inherit;
        }
    }

    .calendar-header {
        background-color: @lightCyan;
        color: @white;

		a {
			color: @white;
			padding: .325rem;
			&:hover {
				background-color: lighten(@cyan, 10%);
				color: @white;
			}
		}
    }

	.week-days {
//		background-color: @brown;
//		color: @white;
	}

    .calendar-actions {
		.clear-float;
    }

    .today {
        a {
            background-color: @green;
            color: @white;
			.text-shadow;
        }
    }

    .day {

		border: 1px @borderColor solid;
        text-align: center;

        a {
            display: block;
            position: relative;
            text-align: center;
            //border: 2px transparent solid;
        }

        a.selected {

        }
    }

    .month, .year {
		border: 1px @borderColor solid;

        a {
            padding-top: 1.3125rem;
            padding-bottom: 1.3125rem;
        }
    }

    .empty {
		cursor: default;
    }

    .other-day {
        display: block;
        text-align: center;
        color: @grayLight;
		padding: .325rem;
		background-color: @grayLighter;
		border: 1px @borderColor solid;
    }

	.exclude {
		background-color: @red;
		a {
			cursor: not-allowed;
			background-color: @red;
			color: @white;
		}
	}
	.stored {
		background-color: @lightPink;
		a {
			cursor: pointer;
			background-color: @lightPink;
			color: @white;
		}
	}
    .selected {
        background-color: @lightCyan;
        a {
            background-color: @lightCyan;
            color: @white;
        }
    }
}

.calendar {
	&.rounded {
		button {
			border-radius: @borderRadius;
		}

		.day, .month, .year, .other-day, .today, .calendar-header, .selected {
			border-radius: @borderRadius;
		}

		.today a, .selected a, .exclude a {
			border-radius: @borderRadius;
		}

		.calendar-header {
			a {
				&:hover {
					border-radius: @borderRadius;
				}
			}
		}
	}
}

.calendar {
	&.no-border {

		.day, .month, .year, .other-day, .today, .calendar-header {
			border: 0;
		}

		.today a {
			border: 0;
		}
	}
}

.calendar-dropdown {
    border: 0;
    .block-shadow;
}