/*
* @category controls
* @component date-picker
* @spark-ui
*/
@import 'core';
@import 'colors';

$datepicker__class: '#{$prefix}-datepicker';
$datepicker-header__padding-top: rem-calc(13);
$datepicker-navigation__padding: 0 rem-calc(16);
$datepicker-navigation__line-height: rem-calc(24);
$datepicker-navigation-buttons__padding: rem-calc(5) 0;
$datepicker-navigation-buttons--next__margin-left: rem-calc(20);
$datepicker-day-names__padding: 0 rem-calc(13);
$datepicker-day-names__color: $gray-2;
$datepicker-day__size: rem-calc(28);
$datepicker-day__margin: rem-calc(2);
$datepicker-day__font-size: rem-calc(12);
$datepicker-day__color: $black;
$datepicker-day__bg: transparent;
$datepicker-day__bg--hover: $black-12;
$datepicker-day__bg--selected: $black;
$datepicker-day__color--selected: $white;
$datepicker-day__color--outside-month: $gray-2;
$datepicker-day__color--today: $orange-base;
$datepicker-day__bg--today: $white;
$datepicker-day__color--today--selected: $white;
$datepicker-day__bg--today--selected: $orange-base;
$datepicker-day__color--disabled: $gray-4;
$datepicker-month__padding: 0 rem-calc(13) rem-calc(9) rem-calc(13);

$datepicker-day__bg--hover--contrast: $orange-pastel;
$datepicker-day__color--today--contrast: $orange-base--contrast;
$datepicker-day__bg--today--selected--contrast: $orange-base--contrast;

// TODO: Remove ng settings when symphony styles are deprecated.
$datepicker-width: 211px !default;
$daypicker-day-width: 22px !default;
$datepicker-large-width: $datepicker-width + 25px !default;
$daypicker-large-day-width: 30px;