.c-datepicker {
    arrows() {
        display: block;
        width: 16px;
        height: @width;
        background-size: cover;
        background-repeat: no-repeat;
        cursor: pointer;
    }
    
    arrow-left() {
        arrows();
        background-image: url(components/date-picker/assets/icon-chevron-left.svg);
    }

    arrow-right() {
        arrows();
        background-image: url(components/date-picker/assets/icon-chevron-right.svg);
    }

    @extend $input-field;
    padding-right: 36px;
    cursor: pointer;

    &:hover {
        & ~ .c-datepicker__icon {
            color: $color--main;
        }
    }

    &:focus {
        & ~ .c-datepicker{
            &__icon {
                color: $color--main;
            }

            &__popover {
                display: block;
            }
        }

        &, 
        ^[0]:not(:placeholder-shown) {
            & ~ .c-datepicker__label {
                @extend $active-label;
            }
        }
    }

    &__popover-placeholder {
        position: relative;
    }

    &__label {
        @extend $basic-label;
    }

    &__icon {
        @extend $input-icon;
    }

    // Vendor

    &__vendor {
        @extend $popover;
        position: absolute;
        top: 60px;
        z-index: 1;
        margin-top: 10px;
        width: 100%;
        animation: appear-popover .4s ease-out;

        @media (min-width: $screen--sm) {
            width: 300px;
        }

        &-input-wrap {
            display: none;
        }

        &-header {
            & > div:first-child {
                flexbox();
                align-items: center;
            }
        }

        &-ym-select {
            flexbox();
            justify-content: center;
            flex: 1 0 0;
        }

        &-month-select,
        &-year-select {
            cursor: pointer;
            color: $color--main-dark;

            &:hover {
                color: @color;
            }
        }

        &-month-select {
            text-transform: capitalize;
        }

        &-year-select {
            order: 1;
            margin-left: 4px;
        }

        &-prev, &-next {
            &-year-btn {
                display: none;
            }
        }

        &-prev-month-btn {
            arrow-left();
        }

        &-next-month-btn {
            arrow-right();
        }

        &-month-panel,
        &-year-panel,
        &-decade-panel {
            margin-top: 20px;
            margin-left: -(@margin-top);
            margin-right: @margin-left;
            padding: @margin-top;
            background: $color--gray-3;

            a {
                cursor: pointer;
                color: $color--main-dark;
            }

            &-header {
                flexbox();
                align-items: center;
                margin-bottom: 10px;
            }

            &-year-select,
            &-decade-select,
            &-century {
                flex: 1 0 0;
                text-align: center;
                font-weight: $font--bold;

                &-arrow {
                    display: none;
                }
            }

            &-prev-year-btn,
            &-prev-decade-btn,
            &-prev-century-btn {
                arrow-left();
                width: 12px;
                height: @width;
            }
            
            &-next-year-btn,
            &-next-decade-btn,
            &-next-century-btn {
                arrow-right();
                width: 12px;
                height: @width;
            }

            &-table {
                width: 100%;
            }

            &-cell {
                text-align: center;
            }
        }

        &-table {
            width: 100%;
            border-spacing: 0;

            th, td {
                padding: 0;
                border-spacing: 0;
                text-align: center;
            }

            th {
                padding: .7em .3em;
                font-weight: $font--bold;
                line-height: 1.5;
            }

            td {
                border-top: solid 1px transparent;
                border-bottom: @border-top;

                &:first-child {
                    border-radius: 15px 0 0 15px;
                    border-left: @border-top;
                }

                &:last-child {
                    border-radius: 0 15px 15px 0;
                    border-right: @border-top;
                }
            }
        }

        &-column-header {
            days-alias = "D" "S" "T" "Q" "Q" "S" "S";

            for day, i in days-alias {
                &:nth-child({i + 1}) {
                    &:before {
                        content: day;
                    }
                }    
            }
            

            &-inner {
                display: none;
            }
        }
    }

    // código próprio

    &--weekly {
        tr {
            cursor: pointer;

            &:hover {
                .c-datepicker__day:not(.is-disabled) {
                    border-top-color: $color--main;
                    border-bottom-color: @border-top-color;
                    color: $color--main;

                    &.is-active {
                        color: #fff;
                    }
                }

                td {
                    &:first-child {
                        .c-datepicker__day:not(.is-disabled) {
                            border-left: solid 1px $color--main;
                        }
                    }

                    &:last-child {
                        .c-datepicker__day:not(.is-disabled) {
                            border-right: solid 1px $color--main;
                        }
                    }
                }
            }
        }

        .c-datepicker__day {
            width: 100%;
            border-radius: 0;
            border: solid 1px transparent;
            border-left: none;
            border-right: none;

            &.is-active {
                box-shadow: 0 0 0 1px $color--main;
            }

            &:hover {
                border-color: transparent;
                color: inherit;
            }
        }

        td {
            border: none;

            &:first-child {
                .c-datepicker__day {
                    border-radius: 15px 0 0 15px;
                    border-left: solid 1px transparent;
                }
            }

            &:last-child {
                .c-datepicker__day {
                    border-radius: 0 15px 15px 0;
                    border-right: solid 1px transparent;
                }
            }
        }
    }

    &__day {
        width: 30px;
        height: 30px;
        padding: 0;
        border: solid 1px transparent;
        border-radius: 50em;
        color: #7f7f7f;
        text-align: center;
        line-height: 28px;

        &:hover {
            border-color: currentColor;
            color: $color--main;
        }

        &--out {
            color: #bfbfbf;
        }

        &.is-active {
            background-color: $color--main;
            border-color: transparent;
            color: #fff;

            &:hover {
                color: @color;
            }
        }

        &.is-disabled {
            color: $color--gray-2;

            &:hover {
                color: @color;
            }
        }
    }
}

@keyframes appear-popover {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}