Datepicker

This is only for dates. For time there is still no design

#full wrap
background: var(--White, #FFF);

#shortcuts
display: flex;
padding-right: var(--Spacing-LG, 32px);
flex-direction: column;
align-items: flex-start;
align-self: stretch;
#shortcut
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--Spacing-SM, 8px);
color: var(--Gray-600, #575A63);
font-feature-settings: 'salt' on;
/* text-base/normal */
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
##selected shortcut
color: #0EA5E9;

#calendar
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-SM, 8px);
align-self: stretch;

#calendar month and arrows
display: flex;
padding-left: var(--Spacing-SM, 8px);
align-items: center;
gap: var(--Spacing-MD, 16px);
align-self: stretch;
##month
flex: 1 0 0;
color: var(--Gray-800, #424448);
font-feature-settings: 'salt' on;

/* text-base/semibold */
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */

##arrows
display: flex;
align-items: flex-start;
###arrow 
display: flex;
width: 30px;
height: 30px;
padding: var(--Spacing-XS, 4px);
justify-content: center;
align-items: center;
gap: var(--Spacing-XS, 4px);
border-radius: var(--Elements-Button-Roundness, 50px);

#days with letters
display: flex;
align-items: flex-start;
##day
display: flex;
width: 36px;
padding: var(--Spacing-SM, 8px);
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--Spacing-SM, 8px);
color: var(--text-secondary, #7B8199);
text-align: center;
font-variant-numeric: lining-nums proportional-nums;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
letter-spacing: -0.18px;

#days in the month with numbers
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--Spacing-XXS, 2px);
align-self: stretch;

##row of days
display: flex;
align-items: flex-start;

###single day with number
display: flex;
width: 36px;
padding: var(--Spacing-XS, 4px);
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--Spacing-SM, 8px);

### signle day, unselected
border-radius: 18px;
background: var(--Black, #000);
color: var(--Gray-300, #ABAFB5);

### single day, selected, start of range
border-radius: 18px 0px 0px 18px;
border-top: 1px solid var(--Gray-100, #E5E7E8);
border-bottom: 1px solid var(--Gray-100, #E5E7E8);
border-left: 1px solid var(--Gray-100, #E5E7E8);
background: var(--Gray-50, #F5F6F6);

#### single day, selected, inner circle, start or end of range
display: flex;
width: 28px;
height: 28px;
padding: var(--Spacing-XS, 4px);
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--Spacing-SM, 8px);
border-radius: 14px;
border: 1px solid RainbowBorder;
background: var(--Black, #000);
color: var(--White, #FFF);

### single day, part of range
border-top: 1px solid var(--Gray-100, #E5E7E8);
border-bottom: 1px solid var(--Gray-100, #E5E7E8);
background: var(--Gray-50, #F5F6F6);
color: var(--Black, #000);

### signle day, selected, end of range
border-radius: 0px 18px 18px 0px;
border-top: 1px solid var(--Gray-100, #E5E7E8);
border-right: 1px solid var(--Gray-100, #E5E7E8);
border-bottom: 1px solid var(--Gray-100, #E5E7E8);
background: var(--Gray-50, #F5F6F6);

### single day, selected, no range

border-radius: 18px;
border: 1px solid RainbowBorder;
background: var(--Black, #000);
color: var(--White, #FFF);

### single day, today
color: #0EA5E9;