:root {
  .air-datepicker {
    padding: 8px 0;
    border: unset;
    box-shadow: 0px 5px 16px 0px #00000014, 0px 2px 8px 0px #0000000F;

    --adp-font-family: var(--font-theme);
    --adp-font-size: var(--text-p3);
    --adp-width: 256px;
    --adp-padding: var(--spacing-8px) var(--spacing-16px);
    --adp-border-radius: var(--radius-12px);
    --adp-nav-arrow-color: var(--color-accent-500);
    --adp-nav-action-size: var(--spacing-16px);
    --adp-nav-height: 22px;
    --adp-day-name-color: var(--color-accent-500);
    --adp-color-current-date: var(--color-accent-900);
    --adp-cell-background-color-selected: var(--color-accent-900);
    --adp-color-other-month: var(--color-gray-300);
    --adp-background-color-selected-other-month: var(--color-accent-200);
    --adp-background-color-selected-other-month-focused: var(--color-accent-300);
    --adp-background-color-in-range: var(--color-accent-900);
    --adp-background-color-in-range-focused: var(--color-accent-800);
    --adp-cell-background-color-selected-hover: var(--color-accent-800);
    --adp-background-color-hover: var(--color-gray-50);
    --adp-nav-color-secondary: var(--color-gray-700);

    .air-datepicker--pointer {
      display: none;
    }

    .air-datepicker-nav {
      border-bottom: unset;
      height: 22px;

      .air-datepicker-nav--title {
        font-size: var(--text-h10);
        line-height: var(--text-h10--line-height);
        font-weight: var(--text-h10--font-weight);
      }
    }

    .air-datepicker-body {
      .air-datepicker-body--day-names {
        margin: var(--spacing-8px) 0;
      }

      .air-datepicker-body--day-name {
        text-transform: capitalize;
        font-size: var(--text-p4);
        line-height: var(--text-p4--line-height);
      }

      .air-datepicker-body--cells {
        color: var(--color-gray-600);
      }
    }

    .air-datepicker-nav--action {
      width: var(--spacing-24px);
      height: var(--spacing-24px);
      border-radius: var(--radius-4px);

      svg {
        width: var(--adp-nav-action-size);
        height: var(--adp-nav-action-size);
      }
    }

    .air-datepicker-cell {
      font-size: var(--text-p3);
      line-height: var(--text-p3--line-height);
    }
    .air-datepicker-cell.-current {
      font-size: var(--text-h10);
      line-height: var(--text-h10--line-height);
      font-weight: var(--text-h10--font-weight);
    }
  }
}

.dark {
  .air-datepicker {
    box-shadow: 0px 5px 16px 0px #FFFFFF34, 0px 2px 8px 0px #FFFFFF2F;

    --adp-background-color: var(--color-black);
    --adp-color: var(--color-gray-50);
    --adp-color-current-date: var(--color-accent-50);
    --adp-color-other-month: var(--color-gray-500);
    --adp-background-color-selected-other-month: var(--color-accent-600);
    --adp-background-color-selected-other-month-focused: var(--color-accent-600);
    --adp-background-color-hover: var(--color-gray-700);
    --adp-background-color-in-range: var(--color-accent-50);
    --adp-background-color-in-range-focused: var(--color-accent-100);
    --adp-cell-background-color-selected: var(--color-accent-50);
    --adp-cell-background-color-selected-hover: var(--color-accent-100);
    --adp-nav-arrow-color: var(--color-accent-200);
    --adp-nav-color-secondary: var(--color-gray-100);

    .air-datepicker-cell.-selected- {
      color: var(--color-black);
    }
    .air-datepicker-body {
      .air-datepicker-body--cells {
        color: var(--color-gray-200);
      }
    }
  }
}