@import '../../node_modules/tiny-date-picker/tiny-date-picker.min.css';

.dp-below {
    background: $grey;
    .dp {
        background: transparent;
        padding: 20px;
        &:before { display: none; }
        &-cal {
            &-header {
                background: transparent;
                .dp-prev, .dp-next,
                .dp-cal-month, .dp-cal-year {
                    color: $red;
                    &:hover {
                        background: $red;
                        color: $white;
                    }
                }
            }
            &-footer { display: none; }
            .dp-days {
                .dp-day {
                    position: relative;
                    transition: 180ms linear;
                    &:before {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        display: block;
                        background: $white;
                        @include size(94%,94%);
                        transform: translate(-50%,-50%);
                        z-index: -1;
                    }
                    &-today {
                        &:after {
                            border-color: $red $red transparent transparent;
                        }
                    }
                    &.dp-current { background: $red; color: $white; }
                    &.dp-edge-day {
                        &:before { opacity: 0.4; }
                    }
                    &:hover {
                        background: $red;
                    }
                }
            }
        }
    }
}