// datepicker styling for browsers without native widgets
.ui-datepicker
{
    @include font-dimensions(14px, steps(3), 0.6px);

    display: none;
    border: 1px solid $color-border-normal;

    color: $color-text-normal;
    background: $color-background-lightest;

    .ui-datepicker-header
    {
        @include antialiasing;
        @include clear-inside;

        position: relative;

        padding-top: steps(1);
        padding-bottom: steps(1);

        color: $color-text-inverted-lighter;
        background: $color-background-inverted-normal;
        text-align: center;

        select
        {
            padding-right: steps(1.5);
            border: 0;

            color: $color-text-inverted-lighter;
            background: $color-background-inverted-normal svg-image-data-url("chevron-down", $color-text-inverted-lighter) right / 10px no-repeat;

            -webkit-appearance: none;
               -moz-appearance: none;

            &::-ms-expand
            {
        		display: none;
        	}

            &.ui-datepicker-month
            {
                margin-right: steps(2);
            }
        }
    }

    .ui-datepicker-prev,
    .ui-datepicker-next
    {
        padding: 0 steps(1.5);

        cursor: pointer;

        &::before
        {
            content: "";

            display: block;
            width: steps(2);
            height: steps(2);
            padding: steps(0.5) 0;
        }

        .ui-icon
        {
            @include visually-hidden;
        }
    }

    .ui-datepicker-prev
    {
        float: left;

        &::before
        {
            content: svg-image-data-url('chevron-left', $color-border-normal);
        }
    }

    .ui-datepicker-next
    {
        float: right;

        &::before
        {
            content: svg-image-data-url('chevron-right', $color-border-normal);
        }
    }

    .ui-datepicker-title
    {
        margin: 0 steps(5);
    }

    table
    {
        width: 100%;
        border-collapse: collapse;
    }

    tr
    {
        &:first-child td
        {
            padding-top: steps(2);
        }

        &:last-child td
        {
            padding-bottom: steps(2);
        }
    }

    th
    {
        @include font-dimensions(12px, steps(3));

        padding: 0;

        font-weight: normal;
        color: $color-text-darker;
        background: $color-text-lightest;

        &:first-child
        {
            padding-left: steps(2);
        }

        &:last-child
        {
            padding-right: steps(2);
        }
    }

    td
    {
        padding: 2.5px;

        text-align: center;

        &:first-child
        {
            padding-left: steps(2);
        }

        &:last-child
        {
            padding-right: steps(2);
        }
    
        a, span
        {
            display: inline-block;
            width: steps(3);
            height: steps(3);
            border-radius: 50%;

            line-height: steps(3) + 1px; // +1px to adjust `fsme` font shifted vertical metrics
            text-align: center;
            text-decoration: none;
        }
    }

    .ui-state-disabled
    {
        opacity: 0.35;
        pointer-events: none;
    }
}

.ui-state-default
{
    .ui-datepicker-calendar &
    {
        color: $color-text-normal;
        background: $color-background-lighter;
    }

    .ui-datepicker-week-end &
    {
        background: none;
        box-shadow: inset 0 0 0 1px $color-border-normal;
    }

    .ui-datepicker-other-month &
    {
        color: $color-text-lightest;
        background: none;
        box-shadow: none;
    }

    // should have stronger specificity over `hover` rule
    td.ui-datepicker-today &
    {
        color: $color-text-darker;
        background: $color-border-normal;
        box-shadow: none;
    }
    td.ui-datepicker-current-day &
    {
        color: $color-text-inverted-lighter;
        background: $color-brand-normal;
        box-shadow: none;
    }
}

.ui-state-hover
{
    .ui-datepicker-calendar &
    {
        background: $color-background-darker;
    }

    .ui-datepicker-week-end &
    {
        box-shadow: inset 0 0 0 1px $color-background-darker;
    }
}

.ui-datepicker-trigger
{
    @include hidden-text;

    position: absolute;
    z-index: 1;
    top: 50%;
    right: 13px;

    width: steps(3);
    height: steps(3);
    margin-top: -1px;

    transform: translateY(-50%);

    .ie &
    {
        // workaround for ie9/10 to make button clickable
        background: create-rgba($color-background-normal, .01);
    }

    .field.disabled &
    {
        display: none;
    }
}
