$base-color = #007eff $weak-color = #8ac4ff $weak-color-darkmode = #002a41 $unavailable-color = #aaa $unavailable-color-darkmode = #323232 $highlight-background = #d1e8ff $highlight-background-darkmode = #003b75 $table-header-color = #666 $border = #ccc $border-darkmode = #494949 $select-darkmode = #cdcdcd; body.the-datepicker-page overflow hidden @media (min-width: 37.5em) overflow auto .the-datepicker__container position absolute left auto top auto z-index 99 &.the-datepicker__container--responsive position fixed left 0 top 0 @media (min-width: 37.5em) position absolute left auto top auto .the-datepicker__main border-top-left-radius 0 &.the-datepicker__container--over .the-datepicker__main border-top-left-radius 0.3em border-bottom-left-radius 0 &.the-datepicker__container--left .the-datepicker__main border-top-left-radius 0.3em border-top-right-radius 0 &.the-datepicker__container--over.the-datepicker__container--left .the-datepicker__main border-bottom-left-radius 0.3em border-top-right-radius 0.3em border-bottom-right-radius 0 .the-datepicker__main width auto height auto background-color white border 1px solid $border border-radius 0.3em font-family Arial, Helvetica, sans-serif line-height 1em box-sizing border-box overflow-y auto &.the-datepicker__main--darkmode background-color black border-color $border-darkmode .the-datepicker__container--responsive & width 100vw height 100vh @media (min-width: 37.5em) width auto height auto .the-datepicker__header padding 0.4em 0.4em 0 0.4em .the-datepicker__body margin-top 1em padding 0 0.4em 0.4em 0.4em overflow-x hidden overflow-y hidden &.the-datepicker__body--swipeable touch-action none th.the-datepicker__week-day padding 0.5em 0 text-align center font-weight normal text-transform uppercase color $table-header-color font-size 0.85em a.the-datepicker__button display block width 2.1em padding 0.6em 0 text-decoration none text-align center color $base-color border-radius 0.3em &:hover background-color $highlight-background text-decoration none .the-datepicker__main--darkmode& background-color $highlight-background-darkmode a.the-datepicker__day-button width auto .the-datepicker__container & width 2.1em .the-datepicker__container.the-datepicker__container--responsive & width auto @media (min-width: 37.5em) width 2.1em a.the-datepicker__year-button width auto a.the-datepicker__year-cell-button width auto .the-datepicker__container & width 3.825em .the-datepicker__container.the-datepicker__container--responsive & width auto @media (min-width: 37.5em) width 3.825em .the-datepicker__title display inline-block width 70% .the-datepicker__title-content display inline-block padding 0.5em .the-datepicker__control display inline-block width 30% text-align right .the-datepicker__reset, .the-datepicker__close display inline-block font-weight bold .the-datepicker__navigation margin-top 0.3em .the-datepicker__go display inline-block width 15% a.the-datepicker__button display inline-block font-weight bold .the-datepicker__go-next text-align right .the-datepicker__state display inline-block width 70% .the-datepicker__month display inline-block width 62% text-align center .the-datepicker__year display inline-block width 38% text-align center .the-datepicker__month-year text-align center select.the-datepicker__select font-size 0.9em margin 0 padding 0 background-color white color black .the-datepicker__main--darkmode& background-color black color $select-darkmode table.the-datepicker__table width 100% border-collapse collapse .the-datepicker__container & width auto .the-datepicker__container.the-datepicker__container--responsive & width 100% @media (min-width: 37.5em) width auto td.the-datepicker__cell padding 0 a.the-datepicker__button padding 0.1em margin 0 auto .the-datepicker__button-content display block &.the-datepicker__day-content padding 0.6em 0 &.the-datepicker__year-cell-content padding 0.755em 0 td.the-datepicker__cell a.the-datepicker__button .the-datepicker__button-content text-align center border-radius 0.3em &:hover background-color transparent .the-datepicker__button-content background-color $highlight-background .the-datepicker__main--darkmode& background-color $highlight-background-darkmode td.the-datepicker__cell--highlighted a.the-datepicker__button .the-datepicker__button-content background-color $highlight-background .the-datepicker__main--darkmode& background-color $highlight-background-darkmode td.the-datepicker__day--outside a.the-datepicker__button color $weak-color .the-datepicker__main--darkmode& color $weak-color-darkmode td.the-datepicker__cell--unavailable a.the-datepicker__button color $unavailable-color .the-datepicker__main--darkmode& color $unavailable-color-darkmode &:hover .the-datepicker__button-content background-color transparent .the-datepicker__main--darkmode& background-color transparent td.the-datepicker__cell--selected, td.the-datepicker__cell--selected.the-datepicker__cell--highlighted a.the-datepicker__button color white .the-datepicker__main--darkmode& color white .the-datepicker__button-content background-color $base-color &:hover .the-datepicker__button-content background-color $base-color .the-datepicker__main--darkmode& background-color $base-color .the-datepicker__animated animation-duration 0.1s animation-fill-mode both .the-datepicker__deselect position absolute .the-datepicker__deselect-button position relative left -0.8em text-decoration none color $base-color font-weight bold &:hover text-decoration none @keyframes the-datepicker-fade-out-left from transform translate3d(0, 0, 0) to transform translate3d(-100%, 0, 0) .the-datepicker__fade-out-left animation-name the-datepicker-fade-out-left @keyframes the-datepicker-fade-out-right from transform translate3d(0, 0, 0) to transform translate3d(100%, 0, 0) .the-datepicker__fade-out-right animation-name the-datepicker-fade-out-right @keyframes the-datepicker-fade-in-left from transform translate3d(-100%, 0, 0) to transform translate3d(0, 0, 0) .the-datepicker__fade-in-left animation-name the-datepicker-fade-in-left @keyframes the-datepicker-fade-in-right from transform translate3d(100%, 0, 0) to transform translate3d(0, 0, 0) .the-datepicker__fade-in-right animation-name the-datepicker-fade-in-right @keyframes the-datepicker-fade-out-up from transform translate3d(0, 0, 0) to transform translate3d(0, -100%, 0) .the-datepicker__fade-out-up animation-name the-datepicker-fade-out-up @keyframes the-datepicker-fade-out-down from transform translate3d(0, 0, 0) to transform translate3d(0, 100%, 0) .the-datepicker__fade-out-down animation-name the-datepicker-fade-out-down @keyframes the-datepicker-fade-in-up from transform translate3d(0, -100%, 0) to transform translate3d(0, 0, 0) .the-datepicker__fade-in-up animation-name the-datepicker-fade-in-up @keyframes the-datepicker-fade-in-down from transform translate3d(0, 100%, 0) to transform translate3d(0, 0, 0) .the-datepicker__fade-in-down animation-name the-datepicker-fade-in-down