@use "./variables" as *;


.datepicker {
    top: 0;
    left: 0;
    padding: 4px;
    margin-top: 1px;
    border-radius: 4px;

    > div {
        display: none;
    }

    table {
        width: 100%;
        margin: 0;
    }

    td,
    th {
        text-align: center;
        width: 20px;
        height: 20px;
        border-radius: 4px;
    }

    td {
        &.day {
            &:hover {
                background: $datepicker-hover-color;
                color: $datepicker-black;
                cursor: pointer;
            }
        }

        &.active {
            &:hover {
                background: $datepicker-primary-background;
                color: #fff;
                text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
            }
        }

        &.new,
        &.old {
            color: #999;
        }

        span {
            display: block;
            width: 47px;
            height: 54px;
            line-height: 54px;
            float: left;
            margin: 2px;
            cursor: pointer;
            border-radius: 4px;

            &:hover {
                background: $datepicker-hover-color;
                color: $datepicker-black;
            }

            &.active,
            &.focused {
                background: $datepicker-primary-background;
                color: #fff;
                text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
            }

            &.old {
                color: $datepicker-default-color;
            }

            &.disabled {
                color: $datepicker-default-color;
            }
        }
    }

    th {
        &.switch {
            width: 145px;
        }

        &.next,
        &.prev {
            font-size: $datepicker-font-size * 1.5;

            &:hover {
                &:not(.disabled) {
                    cursor: pointer;
                }
            }
        }
    }

    thead {
        tr {
            &:first-child {
                th {
                    cursor: pointer;

                    &:hover {
                        background: $datepicker-hover-color;
                    }
                }
            }
        }
    }

    // Highlight weekends.
    .weekend {
        background-color: #f4f4f4;
        border-radius: 0;
    }

    // Reverse display for calendar weeks (cw) and days.
    &.week-select {
        // All rows but the one with the day names in it.
        tr {
            &:not(.header) {
                &.active,
                &:hover {
                    background: #eee;
                    color: $datepicker-default-color;

                    td {
                        cursor: default;
                    }

                    .cw {
                        background: $datepicker-primary-background;
                        color: $datepicker-default-color;
                        text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
                    }

                    .disabled {
                        border-radius: 0;
                    }
                }

                &:not(.active) {
                    td {
                        cursor: pointer;
                    }
                }
            }

            .cw {
                font-size: 14px;
                width: 20px;
                padding: 4px 5px;
                line-height: 20px;
                vertical-align: middle;
            }

            .day {
                font-size: 10px;
                width: 12px;
                padding: 0 2px 0 5px;
                vertical-align: middle;

                &.range {
                    border-radius: 0;
                }

                &:hover {
                    &:not(.active) {
                        background: inherit;
                    }
                }
            }

            // Don't highlight weekend columns.
            .weekend {
                background-color: inherit;

                // Do not highlight weekends in .week-select.
                .range {
                    background-color: $datepicker-hover-color;
                }
            }
        }
    }
}

.input-append,
.input-prepend {
    &.date {
        .add-on {
            i {
                display: block;
                cursor: pointer;
                width: 16px;
                height: 16px;
            }
        }
    }
}


// Set a different baseline for text in .read-only.
.controls {
    .read-only {
        font-size: 14px;
        line-height: 20px;
        padding-top: 5px;
    }
}