:host(us-datepicker) {
  .datepicker {
    &-anchor {
      position: absolute;
      top: 0;
      clip: rect(1px, 1px, 1px, 1px);
      padding: 0;
      border: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .datepicker-container__over {
      position: relative;

      .air-datepicker {
        box-sizing: border-box;

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

    &__list {
      padding: var(--space-inner-m) 0;
      background-color: var(--color-neutral-0);
      border-radius: var(--border-radius-m);
      box-shadow: var(--box-shadow-200);

      &-item-outer {
        &_custom {
          padding-bottom: var(--space-inner-s);
          border-bottom: 1px solid var(--color-neutral-300);
        }

        &_active {
          .datepicker__list-item {
            background-color: var(--color-primary-100);
          }
        }
      }

      &-item {
        padding: var(--space-inner-s) var(--space-inner-l);
        font: var(--text-p-m-light);
        color: var(--color-text-1000);
        cursor: pointer;

        &:hover {
          background-color: var(--color-primary-100);
        }
      }
    }

    &-legend {
      grid-area: legend;
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-inline-l);
      margin-top: var(--space-inner-xl);
      padding-top: var(--space-inner-xl);
      border-top: 1px solid var(--color-neutral-300);
      font: var(--text-p-m-light);
      color: var(--color-text-1000);

      &__item {
        display: flex;
        align-items: center;

        &::before {
          content: "";
          display: inline-block;
          margin-right: var(--space-inline-m);
        }

        &_today::before {
          width: var(--size-xs);
          height: var(--size-xs);
          background-color: var(--color-secondary-100);
          border-radius: 3px;
        }

        &_positive::before,
        &_negative::before {
          width: var(--date-picker-event-width);
          height: var(--date-picker-event-height);
          border-radius: var(--date-picker-event-border-radius);
        }

        &_positive::before {
          background-color: var(--color-success-600);
        }

        &_negative::before {
          background-color: var(--color-danger-600);
        }
      }
    }

    .air-datepicker {
      max-width: var(--date-picker-max-width);
      width: 100%;
      padding: var(--space-outer-s) var(--space-outer-xs);
      border: none;

      /* change default datepicker vars */
      --adp-background-color: var(--color-neutral-0);
      --adp-background-color-hover: var(--color-neutal-0);
      --adp-background-color-active: var(--color-neutral-0);
      --adp-day-name-color: var(--color-text-1000);
      --adp-day-name-color-hover: var(--color-text-1000);
      --adp-nav-arrow-color: var(--color-text-1000);
      --adp-color-other-month: var(--color-text-600);
      --adp-color-other-month-hover: var(--color-text-600);
      --adp-color: var(--color-text-1000);
      --adp-color-disabled: var(--color-text-600);
      --adp-color-disabled-in-range: var(--color-text-600);
      --adp-cell-background-color-selected: var(--color-primary-600);
      --adp-cell-background-color-selected-hover: var(--color-primary-600);
      --adp-background-color-selected-other-month-focused: var(
        --color-primary-600
      );
      --adp-background-color-selected-other-month: var(--color-primary-600);
      --adp-cell-background-color-in-range: var(--color-primary-100);
      --adp-cell-background-color-in-range-hover: var(--color-primary-100);
      --adp-background-color-in-range: var(--color-primary-100);
      --adp-background-color-in-range-focused: var(--color-primary-100);
      --adp-color-current-date: var(--color-secondary-1000);
      --adp-grid-areas: "buttons" "nav" "body" "timepicker" "legend";
      /* change default datepicker vars */

      &.-active- {
        padding: var(--space-outer-s) var(--space-outer-xs);
      }

      &.-inline- {
        padding: 0 0 var(--space-inner-xl);
        margin-top: var(--space-inline-xl);

        .simplebar-track.simplebar-vertical {
          right: calc(var(--space-inner-xl) * -1);
        }
      }

      &--buttons {
        border-top: none;
        padding: 0;
        margin-bottom: var(--space-inner-xl);

        & .air-datepicker-buttons {
          gap: var(--space-inner-l);
        }
      }

      .air-datepicker-nav {
        justify-content: space-between;
        margin-bottom: var(--space-inner-xl);
        padding: 0;
        border: none;

        &--title {
          flex-grow: 1;
          margin: 0 var(--space-outer-s);
          background: var(--button-tertiary-neutral-background);
          border: var(--button-tertiary-neutral-border-width) solid
            var(--button-tertiary-neutral-border-color);
          color: var(--button-tertiary-neutral-text-color);
          border-radius: var(--button-tertiary-neutral-border-radius);
          font: var(--button-tertiary-neutral-font);
          text-transform: var(--button-general-text-transform);
          padding: calc(
              var(--button-tertiary-neutral-v-padding) -
                var(--button-tertiary-neutral-border-width)
            )
            calc(
              var(--button-tertiary-neutral-h-padding) -
                var(--button-tertiary-neutral-border-width)
            );

          &:hover {
            border: var(--button-tertiary-neutral-border-hover-width) solid
              var(--button-tertiary-neutral-border-hover-color);
            background: var(--button-tertiary-neutral-background-hover);
            color: var(--button-tertiary-neutral-text-hover-color);
          }

          &:active {
            border: var(--button-tertiary-neutral-border-pressed-width) solid
              var(--button-tertiary-neutral-border-pressed-color);
            background: var(--button-tertiary-neutral-background-pressed);
            color: var(--button-tertiary-neutral-text-pressed-color);
          }

          &:focus-visible {
            outline: var(--button-tertiary-neutral-border-focused-width) solid
              var(--button-tertiary-neutral-border-focused-color);
            background: var(--button-tertiary-neutral-background-focused);
            color: var(--button-tertiary-neutral-text-focused-color);
          }
        }
      }

      .air-datepicker-body--day-names {
        justify-items: center;
        margin-top: 0;
        margin-bottom: var(--space-inner-xs);
      }

      .air-datepicker-body--day-name {
        font: var(--text-p-m-heavy);
        color: var(--color-text-1000);
        text-transform: none;
      }

      .air-datepicker--content {
        padding: 0;
      }

      .air-datepicker-body--cells {
        gap: var(--space-inner-xs) 0;
        justify-items: center;
        justify-content: space-between;

        &.-days- {
          grid-template-columns: repeat(7, 1fr);
          grid-auto-rows: var(--date-picker-date-height);
        }

        &.-years- {
          grid-template-columns: repeat(3, 1fr);
          grid-auto-rows: var(--adp-year-cell-height);
        }

        &.-months-,
        &.-years- {
          gap: var(--space-inner-xs);
        }
      }

      .air-datepicker-cell {
        font: var(--text-p-m-light);
        border-radius: var(--date-picker-date-border-radius);
        border: 2px solid transparent;

        &.-focus- {
          font: var(--text-p-m-heavy);
        }

        &.-day- {
          position: relative;
          width: 100%;
          border-radius: 0;
          border: none;

          .datepicker__cell-day {
            position: relative;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: var(--date-picker-date-width);
            height: var(--date-picker-date-height);
            padding: 0;
            border: 2px solid transparent;
            border-radius: var(--date-picker-date-border-radius);
          }

          &.-selected- {
            background-color: transparent;

            &.-current- {
              .datepicker__cell-day {
                color: var(--color-text-0);
                background-color: var(--adp-cell-background-color-selected);
              }
            }

            .datepicker__cell-day {
              background-color: var(--adp-cell-background-color-selected);
            }
          }

          &.-in-range- {
            border-radius: 0;
          }

          &.-focus- {
            border-color: transparent;

            .datepicker__cell-day {
              border-color: var(--color-primary-600);
            }
          }

          &.-current- {
            background-color: transparent;

            .datepicker__cell-day {
              font: var(--text-p-m-heavy);
              background-color: var(--color-secondary-100);
            }

            &.-in-range- {
              background-color: var(--adp-cell-background-color-in-range);
            }

            &.-range-to-,
            &.-range-from- {
              font: var(--text-p-m-heavy);
              background-color: transparent;

              .datepicker__cell-day {
                background-color: var(--adp-cell-background-color-selected);
              }

              &.-focus- {
                color: var(--color-text-0);
              }
            }

            &.-focus- {
              font: var(--text-p-m-heavy);
              color: var(--adp-color-current-date);
              border-color: transparent;
            }
          }

          &.-range-to-,
          &.-range-from- {
            font: var(--text-p-m-heavy);
            background-color: transparent;

            &::after {
              content: "";
              position: absolute;
              top: 0;
              bottom: 0;
              right: 0;
              left: 50%;
              z-index: -1;
              background-color: var(--adp-cell-background-color-in-range);
            }

            &.-focus- {
              color: var(--color-text-0);
            }

            .datepicker__cell-day {
              color: var(--color-text-0);
              background-color: var(--adp-cell-background-color-selected);
            }
          }

          &.-range-to- {
            font: var(--text-p-m-heavy);
            background-color: transparent;

            &::after {
              right: 50%;
              left: 0;
            }
          }

          &.-range-to-.-range-from-::after {
            display: none;
          }

          &.income .datepicker__cell-day::after,
          &.expense .datepicker__cell-day::after,
          &.expense-income .datepicker__cell-day::before,
          &.expense-income .datepicker__cell-day::after {
            content: "";
            position: absolute;
            bottom: 5px;
            width: var(--date-picker-event-width);
            height: var(--date-picker-event-height);
            border: 1px solid var(--color-neutral-0);
            border-radius: var(--date-picker-event-border-radius);
            box-sizing: content-box;
          }

          &.income .datepicker__cell-day::after {
            background-color: var(--color-success-600);
          }

          &.expense .datepicker__cell-day::after {
            background-color: var(--color-danger-600);
          }

          &.expense-income {
            .datepicker__cell-day::before {
              background-color: var(--color-success-600);
              left: 50%;
            }

            .datepicker__cell-day::after {
              background-color: var(--color-danger-600);
              right: 50%;
            }
          }
        }

        &.-month-,
        &.-year- {
          min-width: 50px;
          width: 100%;
          height: 40px;
        }

        &.-focus- {
          border-color: var(--color-primary-600);
        }

        &.-disabled- {
          &:hover {
            border-color: transparent;
          }
        }
      }
    }

    &.vertical-narrow {
      .air-datepicker {
        .air-datepicker-nav {
          &--title {
            margin: 0 var(--space-outer-xs);
          }
        }
      }
    }
  }
}