//
// Variables
// -------------------------------------------------------------------------------------

$fa-font-path: "~@/fonts/fontawesome/webfonts";
$font-path: "~@/fonts/";
$icon-font-path: "~@/fonts/";

// Vue Datepicker
// -------------------------------------------------------------------------------------

.dp__theme_light {
  --dp-background-color: $color-white;
  --dp-text-color: map-get(map-get($themes, theme-default), color-text-dark);
  --dp-hover-color: #f3f3f3;
  --dp-hover-text-color: #212121;
  --dp-hover-icon-color: #959595;
  --dp-primary-color: #1976d2;
  --dp-primary-disabled-color: #6bacea;
  --dp-primary-text-color: #f8f5f5;
  --dp-secondary-color: #c0c4cc;
  --dp-border-color: #ddd;
  --dp-menu-border-color: #ddd;
  --dp-disabled-color: #f6f6f6;
  --dp-scroll-bar-background: #f3f3f3;
  --dp-scroll-bar-color: #959595;
  --dp-success-color: #76d275;
  --dp-success-color-disabled: #a3d9b1;
  --dp-icon-color: #959595;
  --dp-danger-color: #ff6f60;
  --dp-marker-color: #ff6f60;
  --dp-tooltip-color: #fafafa;
  --dp-disabled-color-text: #8e8e8e;
}

.dp__theme_dark {
  --dp-background-color: transparent;
  --dp-text-color: map-get(map-get($themes, theme-dark), color-text-dark);
  --dp-hover-color: #484848;
  --dp-hover-text-color: #fff;
  --dp-hover-icon-color: #959595;
  --dp-primary-color: #005cb2;
  --dp-primary-disabled-color: #61a8ea;
  --dp-primary-text-color: #fff;
  --dp-secondary-color: #a9a9a9;
  --dp-border-color: #2d2d2d;
  --dp-menu-border-color: #2d2d2d;
  --dp-disabled-color: #737373;
  --dp-disabled-color-text: #d0d0d0;
  --dp-scroll-bar-background: #212121;
  --dp-scroll-bar-color: #484848;
  --dp-success-color: #00701a;
  --dp-success-color-disabled: #428f59;
  --dp-icon-color: #959595;
  --dp-danger-color: #e53935;
  --dp-marker-color: #e53935;
  --dp-tooltip-color: #3e3e3e;
}

$dp__font_family: $font-family-proxima;
$dp__border_radius: $input-border-radius;
$dp__cell_border_radius: $dp__border_radius; // Specific border radius for the calendar cell

$dp__transition_length: $grid-unit-x * 3 !default; // Passed to the translateX in animation
$dp__transition_duration: 0.1s !default; // Transition duration

$dp__button_height: 35px !default; // size for buttons in overlays
$dp__month_year_row_height: 35px !default; // height of the month-year select row
$dp__month_year_row_button_size: 25px !default; // Specific height for the next/previous buttons
$dp__button_icon_height: 20px !default; // icon sizing in buttons
$dp__cell_size: 35px !default; // width and height of calendar cell
$dp__cell_padding: 5px !default; // padding in the cell
$dp__common_padding: 10px !default;
$dp__input_padding: $input-padding-base-y $input-padding-base-x; // padding in the input
$dp__input_icon_padding: 35px !default; // Padding on the left side of the input if icon is present
$dp__menu_min_width: 260px !default; // Adjust the min width of the menu
$dp__action_buttons_padding: 2px 5px !default; // Adjust padding for the action buttons in action row
$dp__row_margin: 5px 0 !default; // Adjust the spacing between rows in the calendar
$dp__calendar_header_cell_padding: 0.5rem !default; // Adjust padding in calendar header cells
$dp__two_calendars_spacing: 10px !default; // Space between two calendars if using two calendars
$dp__overlay_col_padding: 3px !default; // Padding in the overlay column
$dp__time_inc_dec_button_size: 32px !default; // Sizing for arrow buttons in the time picker

// Font sizes
$dp__font_size: $font-size-base; // overall font-size
$dp__line-height: $input-line-height-base;
$dp__preview_font_size: 0.8rem !default; // font size of the date preview in the action row
$dp__time_font_size: 2rem !default; // font size in the time picker