@import "../colors.css";
@import "../spacing.css";
@import "../typography.css";

:root {
  --date-selector-background-color: var(--color-white);
  --date-selector-border-color: var(--color-squanchy-gray-20);
  --date-selector-border-style: solid;
  --date-selector-border-radius: 3px;
  --date-selector-border-width: 1px;
  --date-selector-box-shadow: 2px 2px 2px 0 rgba(168, 168, 173, 0.25);
  --date-selector-font-size: 12px;
  --date-selector-user-select: none;

  --date-selector-sidebar-active-color: var(--color-picklerick-green-100);
  --date-selector-sidebar-background: var(--color-white);
  --date-selector-sidebar-border-radius:
    var(--date-selector-border-radius)
    0
    0
    var(--date-selector-border-radius);
  --date-selector-sidebar-border-width:
    0
    var(--date-selector-border-width)
    0
    0;
  --date-selector-sidebar-padding:
    var(--spacing-medium)
    var(--spacing-medium)
    var(--spacing-medium)
    var(--spacing-small);

  --date-selector-sidebar-h2-color: var(--color-squanchy-gray-100);
  --date-selector-sidebar-h2-font-size: 10px;
  --date-selector-sidebar-h2-font-style: normal;
  --date-selector-sidebar-h2-font-weight: 200;
  --date-selector-sidebar-h2-margin: var(--spacing-small) 0;
  --date-selector-sidebar-h2-padding-left: var(--spacing-tiny);
  --date-selector-sidebar-h2-text-transform: uppercase;

  --date-selector-sidebar-input-border-width: 2px;
  --date-selector-sidebar-input-font-weight: var(--body-text-weight);
  --date-selector-sidebar-input-padding-left: calc(var(--spacing-tiny) - 2px);

  --date-selector-sidebar-label-border-left: 0 solid rgba(69, 69, 80, 0);
  --date-selector-sidebar-label-color: var(--color-birdperson-gray-700);
  --date-selector-sidebar-label-font-size: 14px;
  --date-selector-sidebar-label-font-weight: var(--body-text-weight);
  --date-selector-sidebar-label-margin-left: var(--spacing-tiny);
  --date-selector-sidebar-label-text-transform: capitalize;
  --date-selector-sidebar-label-transition:
    color 150ms cubic-bezier(0.47, 0, 0.75, 0.72),
    padding-left 150ms cubic-bezier(0.47, 0, 0.75, 0.72),
    font-weight 150ms cubic-bezier(0.47, 0, 0.75, 0.72),
    border-left-width 150ms cubic-bezier(0.47, 0, 0.75, 0.72),
    border-left-color 150ms cubic-bezier(0.47, 0, 0.75, 0.72);
  --date-selector-sidebar-width: 192px;
  --date-selector-sidebar-label-width: 100%;
  --date-selector-sidebar-label-will-change:
    color,
    padding-left,
    font-weight,
    border-left-width,
    border-left-color;

  --date-selector-sidebar-arrow-size: 15px;
  --date-selector-sidebar-arrow-left: 17px;
  --date-selector-sidebar-arrow-top: -8px;
  --date-selector-sidebar-arrow-transform: rotate(45deg);

  --date-selector-week-name-background: var(--color-squanchy-gray-100);
  --date-selector-week-name-color: var(--color-picklerick-green-100);
  --date-selector-week-name-font-size: 14px;
  --date-selector-week-name-font-weight: var(--body-text-weight);

  --date-selector-separator: var(--color-squanchy-gray-100);
  --date-selector-separator-height: 14px;
  --date-selector-separator-width: 1px;

  --date-selector-selected-days-color: var(--color-squanchy-gray-100);
  --date-selector-selected-days-font-size: 12px;
}