/**
 * Override Magento calendar classes
 */

.ui-datepicker {
    border-width: 0;
    border-radius: 3px;
    padding: 0;
    min-width: 25rem;

    .ui-datepicker-header {
        background: $colorGold;
        padding: 1rem 2rem;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

    .ui-datepicker-prev {
        top: 2rem;
        left: 2.5rem;
    }

    .ui-datepicker-next {
        top: 2rem;
        right: 1.5rem;
    }

    .ui-datepicker-prev span {
        border-width: 0;
        position: relative;

        &:before,
        &:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 2rem;
            width: 0;
            height: 0;
        }

        &:before {
            left: -1.2rem;
            border-top: 8px solid transparent;
            border-bottom: 0.8rem solid transparent;
            border-right: 0.8rem solid $colorCeruleanBlue;
            margin-top: -0.8rem;
        }

        &:after {
            left: -1rem;
            border-top: 0.6rem solid transparent;
            border-bottom: 0.6rem solid transparent;
            border-right: 0.6rem solid $colorGold;
            margin-top: -0.6rem;
        }
    }

    .ui-datepicker-next span {
        border-width: 0;
        position: relative;

        &:before,
        &:after {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            width: 0;
            height: 0;
        }

        &:before {
            right: -1.2rem;
            border-top: 0.8rem solid transparent;
            border-bottom: 0.8rem solid transparent;
            border-left: 0.8rem solid $colorCeruleanBlue;
            margin-top: -0.8rem;
        }

        &:after {
            right: -1rem;
            border-top: 0.6rem solid transparent;
            border-bottom: 0.6rem solid transparent;
            border-left: 0.6rem solid $colorGold;
            margin-top: -0.6rem;
        }
    }

    .ui-datepicker-title {
        margin: 0 1.5em;
    }

    .ui-datepicker-title select {
        display: inline-block;
        margin: 0;
    }

    .ui-datepicker-calendar td a,
    .ui-datepicker-calendar th span,
    .ui-datepicker-calendar td span {
        background: none;
        border-width: 0;
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        vertical-align: middle;
        text-align: center;
        line-height: 3rem;
        padding: 0;
        font-size: 1.4rem;
        color: $colorDoveGray;
    }

    .ui-datepicker-calendar th span {
        color: $colorMineShaft;
    }

    .ui-datepicker-calendar td,
    .ui-datepicker-calendar th {
        background: none;
        border-width: 0;
        width: 3rem;
        height: 3rem;
        padding: 0;
        font-family: $base-font-family;
        text-align: center;
    }

    .ui-datepicker-calendar {
        background: $colorGallery;
        margin: 1rem 1.5rem 1.5rem;
        border-width: 0;
        width: 23rem;
    }

    .ui-datepicker-table {
        border: none;
        font-size: 1rem;
    }

    .ui-datepicker-calendar .ui-state-disabled {
        background: transparent;
    }

    .ui-datepicker-calendar .ui-state-disabled span {
        color: $colorAlto;
    }

    .ui-datepicker-calendar td .ui-state-active {
        background: $colorWhite;
        color: $colorCeruleanBlue;
    }

    .ui-datepicker-calendar td .ui-state-hover {
        background: $colorCeruleanBlueHover;
        color: $colorWhite;
    }
}