@import '../variables';
@import '../directives/tooltip';
@import '../input-addon';

.air-datepicker-cell {
  &.-range-from-:not(.-range-to-),
  &.-range-to-:not(.-range-from-) {
    position: relative;
    color: #fff;
  }

  &.-range-from-:not(.-range-to-) {
    &:before, &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius);
    }

    &:before {
      right: 0.25rem;
    }
  }

  &.-range-to-:not(.-range-from-) {
    &:before, &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius)  0;
    }

    &:before {
      left: 0.25rem;
    }
  }
}

[data-theme="dark"] {
  .air-datepicker {
    --adp-background-color: #{$dark-body-bg};
    --adp-color-current-date: #{$dark-primary};
    --adp-cell-background-color-selected: #{$dark-primary};
    --adp-cell-background-color-selected-hover: #{lighten($dark-primary, 10%)};
    --adp-day-name-color: #bfbfbf;
    --adp-color: #dedede;
    --adp-color-other-month: #4a4a4a;
    --adp-cell-background-color-in-range: #{$dark-input-focus-border-color};
    --adp-background-color-hover: #{darken($dark-primary, 25%)};
    --adp-border-color-inner: #{lighten($dark-body-bg, 25%)};

    --adp-background-color-selected-other-month-focused: #{$dark-primary};
    --adp-background-color-selected-other-month: #{lighten($dark-primary, 10%)};

    .air-datepicker-cell.-selected-, .air-datepicker-cell.-selected-.-current- {
      color: $dark-body-bg;
    }
  }
}


.itf-datepicker-inline {
  display: inline-flex;

  @include media-breakpoint-down(sm) {
    display: inline-block !important;
  }

  [data-theme="dark"] & {
    .btn-outline-primary {
      &.active {
        color: var(--body-bg);
        background-color: var(--color-primary);
        border-color: var(--color-primary);
      }
      &:hover {
        color: var(--body-bg);
        background-color: var(--color-primary-hover);
        border-color: var(--color-primary-hover);
      }
    }
  }

  .air-datepicker-title {
    padding: 0 0.75rem;
    height: 32px;
    line-height: 32px;
    color: var(--adp-nav-color-secondary);
  }
  .btn {
    border-color: transparent;
  }
}

.air-datepicker {
  --adp-width: 246px; // Day cell width will be equal to 34px
  --adp-z-index: 100;
  --adp-padding: 4px;
  --adp-grid-areas:
          'nav'
          'body'
          'timepicker'
          'buttons';

  --adp-transition-duration: .3s;
  --adp-transition-ease: ease-out;
  --adp-transition-offset: 8px;

  --adp-background-color: transparent;
  --adp-background-color-hover: #f0f0f0;
  --adp-background-color-active: #eaeaea;
  --adp-background-color-in-range: rgba(92, 196, 239, .1);
  --adp-background-color-in-range-focused: rgba(92, 196, 239, .2);
  --adp-background-color-selected-other-month-focused: #8ad5f4;
  --adp-background-color-selected-other-month: #a2ddf6;

  --adp-color: #4a4a4a;
  --adp-color-secondary: #A5A5A9;
  --adp-accent-color: #4eb5e6;
  --adp-color-current-date: #{$primary};
  --adp-color-other-month: #dedede;
  --adp-color-disabled: #aeaeae;
  --adp-color-disabled-in-range: #939393;
  --adp-color-other-month-hover: #c5c5c5;

  --adp-border-color: #dbdbdb;
  --adp-border-color-inner: #00000014;
  --adp-border-radius: 4px;
  //--adp-border-color-inline: #d7d7d7;
  --adp-border-color-inline: transparent;

  --adp-nav-height: 32px;
  --adp-nav-arrow-color: var(--adp-color-secondary);
  --adp-nav-color-secondary: var(--adp-color-secondary);

  --adp-day-name-color: #666;

  --adp-day-cell-width: 1fr;
  --adp-day-cell-height: 34px;
  --adp-month-cell-height: 42px;
  --adp-year-cell-height: 56px;

  --adp-pointer-size: 10px;
  --adp-pointer-offset: 10px;

  --adp-cell-border-radius: 10px;
  --adp-cell-background-color-selected: #{$primary};
  --adp-cell-background-color-selected-hover: #{lighten($primary, 10%)};
  --adp-cell-background-color-in-range: #{mix($primary, $body-bg, 20%)};
  --adp-cell-background-color-in-range-hover: #{mix($primary, $body-bg, 40%)};
  --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
  --adp-cell-compare-color: #8649e1;

  --adp-btn-height: 32px;
  --adp-btn-color: var(--adp-accent-color);
  --adp-btn-color-hover: var(--adp-color);
  --adp-btn-border-radius: var(--adp-border-radius);
  --adp-btn-background-color-hover: var(--adp-background-color-hover);
  --adp-btn-background-color-active: var(--adp-background-color-active);

  --adp-time-track-height: 1px;
  --adp-time-track-color: #dedede;
  --adp-time-track-color-hover: #b1b1b1;
  --adp-time-thumb-size: 12px;
  --adp-time-padding-inner: 10px;
  --adp-time-day-period-color: var(--adp-color-secondary);
}

%otherMonth {
  color: var(--adp-color-other-month);

  &:hover {
    color: var(--adp-color-other-month-hover);
  }

  &.-disabled- {
    &.-focus- {
      color: var(--adp-color-other-month);
    }
  }

  &.-selected- {
    color: #fff;
    background-color: var(--adp-background-color-selected-other-month);
    &.-focus- {
      background-color: var(--adp-background-color-selected-other-month-focused);
    }
  }

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

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


  &:empty {
    background: none;
    border: none;
  }
}

/* -------------------------------------------------
    Datepicker
   ------------------------------------------------- */

.air-datepicker {
  background: var(--adp-background-color);
  border: 1px solid var(--adp-border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  border-radius: var(--adp-border-radius);
  box-sizing: content-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, max-content);
  grid-template-areas: var(--adp-grid-areas);
  color: var(--adp-color);
  width: var(--adp-width);
  position: absolute;
  left: -100000px;
  opacity: 0;
  transition:
          opacity var(--adp-transition-duration) var(--adp-transition-ease),
          transform var(--adp-transition-duration) var(--adp-transition-ease),
          left 0s var(--adp-transition-duration);
  z-index: var(--adp-z-index);

  &.-from-top- {
    transform: translateY(calc(var(--adp-transition-offset) * -1));
  }
  &.-from-right- {
    transform: translateX(var(--adp-transition-offset));
  }
  &.-from-bottom- {
    transform: translateY(var(--adp-transition-offset));
  }
  &.-from-left- {
    transform: translateX(calc(var(--adp-transition-offset) * -1));
  }

  &.-active- {
    opacity: 1;
    transform: translate(0);
    transition:
            opacity var(--adp-transition-duration) var(--adp-transition-ease),
            transform var(--adp-transition-duration) var(--adp-transition-ease),
            left 0s 0s;
  }

  &.-inline- {
    border-color: var(--adp-border-color-inline);
    box-shadow: none;
    position: static;
    left: auto;
    right: auto;
    opacity: 1;
    transform: none;

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

.air-datepicker-global-container {
  position: absolute;
  left: 0;
  top: 0;
}

.air-datepicker--pointer {
  --pointer-half-size: calc(var(--adp-pointer-size) / 2);

  position: absolute;
  background: #fff;
  border-top: 1px solid var(--adp-border-color-inline);
  border-right: 1px solid var(--adp-border-color-inline);
  width: var(--adp-pointer-size);
  height: var(--adp-pointer-size);
  z-index: -1;

  //  Main axis
  // -------------------------

  .-top-left- &, .-top-center- &, .-top-right- & {
    top: calc(100% - var(--pointer-half-size));
    transform: rotate(135deg);
  }

  .-right-top- &, .-right-center- &, .-right-bottom- & {
    right: calc(100% - var(--pointer-half-size));
    transform: rotate(225deg);
  }

  .-bottom-left- &, .-bottom-center- &, .-bottom-right- & {
    bottom: calc(100% - var(--pointer-half-size));
    transform: rotate(315deg);
  }

  .-left-top- &, .-left-center- &, .-left-bottom- & {
    left: calc(100% - var(--pointer-half-size));
    transform: rotate(45deg);
  }

  //  Secondary axis
  // -------------------------

  .-top-left- &, .-bottom-left- & {
    left: var(--adp-pointer-offset);
  }
  .-top-right- &, .-bottom-right- & {
    right: var(--adp-pointer-offset);
  }
  .-top-center- &, .-bottom-center- & {
    left: calc(50% - var(--adp-pointer-size) / 2);
  }

  .-left-top- &, .-right-top- & {
    top: var(--adp-pointer-offset);
  }
  .-left-bottom- &, .-right-bottom- & {
    bottom: var(--adp-pointer-offset);
  }
  .-left-center- &, .-right-center- & {
    top: calc(50% - var(--adp-pointer-size) / 2);
  }

}


.air-datepicker--navigation {
  grid-area: nav;
}

.air-datepicker--content {
  box-sizing: content-box;
  padding: var(--adp-padding);
  grid-area: body;

  .-only-timepicker- & {
    display: none;
  }
}

.air-datepicker--time {
  grid-area: timepicker;
}

.air-datepicker--buttons {
  grid-area: buttons;
}

.air-datepicker--buttons,
.air-datepicker--time {
  padding: var(--adp-padding);
  border-top: 1px solid var(--adp-border-color-inner);
}

/* -------------------------------------------------
    Datepicker body
   ------------------------------------------------- */

.air-datepicker-body {
  transition: all var(--adp-transition-duration) var(--adp-transition-ease);

  &.-hidden- {
    display: none;
  }
}


/*  Day names
   ------------------------------------------------- */

.air-datepicker-body--day-names {
  display: grid;
  grid-template-columns: repeat(7, var(--adp-day-cell-width));
  margin: 8px 0 3px;
}

.air-datepicker-body--day-name {
  color: var(--adp-day-name-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  text-transform: uppercase;
  font-size: .8em;
}

/*  Cells container
   ------------------------------------------------- */

.air-datepicker-body--cells {
  display: grid;
  &.-days- {
    grid-template-columns: repeat(7, var(--adp-day-cell-width));
    grid-auto-rows: var(--adp-day-cell-height);
  }

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

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

.air-datepicker-cell {
  border-radius: var(--adp-cell-border-radius);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  z-index: 1; // ?
  margin-bottom: 1px;
  margin-top: 1px;

  &.-focus- {
    background: var(--adp-background-color-hover);
  }

  &.-current- {
    color: var(--adp-color-current-date);
    position: relative;

    &:after {
      border-radius: 9px;
      content: '';
      top: 2px;
      left: 2px;
      right: 2px;
      bottom: 2px;
      border: 1px solid var(--adp-color-secondary);
      position: absolute;
    }

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

    &.-in-range- {
      color: var(--adp-color-current-date);
    }
  }

  &.-disabled- {
    cursor: default;
    color: var(--adp-color-disabled);

    &.-focus- {
      color: var(--adp-color-disabled);
    }

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

    &.-current- {
      &.-focus- {
        color:var(--adp-color-disabled);
      }
    }
  }

  &.-in-range- {
    background: var(--adp-cell-background-color-in-range);
    border-radius: 0;

    &:hover {
      position: relative;
      &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: var(--adp-cell-border-radius);
        background: var(--adp-cell-background-color-in-range-hover);
        opacity: .5;
        pointer-events: none;
      }
    }
  }

  &.-range-from- {
    background-color: var(--adp-cell-background-color-selected);
    border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius);
  }
  &.-range-to- {
    background-color: var(--adp-cell-background-color-selected);
    border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0;
  }

  &.-range-to-.-range-from- {
    border-radius: var(--adp-cell-border-radius);
  }
  &.-day-.-compare-range-from- {
    &, &.-other-month- {
      border: none;
      background-color: var(--adp-cell-compare-color);//var(--adp-cell-background-color-in-range);
      border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius);
      color: #fff !important;
      &:hover, &.-focus- {
        background-color: var(--adp-cell-compare-color);
      }
    }
  }
  &.-day-.-compare-range-to- {
    &, &.-other-month- {
      border: none;
      background-color: var(--adp-cell-compare-color);
      border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0;
      color: #fff !important;
      &:hover, &.-focus- {
        background-color: var(--adp-cell-compare-color);
      }
    }
  }
  &.-in-compare-range- {
    --space-size: 10px;
    --dash-size: 17px;
    background-image: repeating-linear-gradient(0deg, var(--adp-cell-compare-color), var(--adp-cell-compare-color) var(--space-size), transparent var(--space-size), transparent var(--dash-size), var(--adp-cell-compare-color) var(--dash-size)), repeating-linear-gradient(90deg, var(--adp-cell-compare-color), var(--adp-cell-compare-color) var(--space-size), transparent var(--space-size), transparent var(--dash-size), var(--adp-cell-compare-color) var(--dash-size)), repeating-linear-gradient(180deg, var(--adp-cell-compare-color), var(--adp-cell-compare-color) var(--space-size), transparent var(--space-size), transparent var(--dash-size), var(--adp-cell-compare-color) var(--dash-size)), repeating-linear-gradient(270deg, var(--adp-cell-compare-color), var(--adp-cell-compare-color) var(--space-size), transparent var(--space-size), transparent var(--dash-size), var(--adp-cell-compare-color) var(--dash-size));
    background-size: 2px 100%, 100% 2px, 2px 100% , 100% 2px;
    background-position: -2px 0, 0px 0, 40px 0, 0 100%;
    background-repeat: no-repeat;
    border-radius: 0;

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

  &.-compare-range-to-.-compare-range-from- {
    border-radius: var(--adp-cell-border-radius);
  }
  &.-compare-range-to-.-in-range-, &.-compare-range-from-.-in-range-,
  &.-compare-range-to-.-range-from-, &.-compare-range-to-.-range-to-,
  &.-compare-range-from-.-range-from-, &.-compare-range-from-.-range-to- {
    border-radius: 0;
  }

  &.-selected- {
    color: #fff;
    border: 0;
    background-color: var(--adp-cell-background-color-selected);

    &.-focus- {
      background-color: var(--adp-cell-background-color-selected-hover);
    }
  }
}


/*  Day cell
   ------------------------------------------------- */

.air-datepicker-cell.-day- {
  &.-other-month-, {
    @extend %otherMonth;
  }
}

/*  Year cell
   ------------------------------------------------- */

.air-datepicker-cell.-year- {
  &.-other-decade-, {
    @extend %otherMonth;
  }
}

/* -------------------------------------------------
    Datepicker buttons
   ------------------------------------------------- */

.air-datepicker-buttons {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}

.air-datepicker-button {
  display: inline-flex;
  color: var(--adp-btn-color);
  border-radius: var(--adp-btn-border-radius);
  cursor: pointer;
  height: var(--adp-btn-height);
  border: none;
  background: rgba(255, 255, 255, 0);

  &:hover {
    color: var(--adp-btn-color-hover);
    background: var(--adp-btn-background-color-hover);
  }

  &:focus {
    color: var(--adp-btn-color-hover);
    background: var(--adp-btn-background-color-hover);
    outline: none;
  }

  &:active {
    background: var(--adp-btn-background-color-active);
  }

  span {
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
}

/* -------------------------------------------------
    Datepicker nav
   ------------------------------------------------- */

.air-datepicker-nav {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--adp-border-color-inner);
  min-height: var(--adp-nav-height);
  padding: var(--adp-padding);

  .-only-timepicker- & {
    display: none;
  }
}
.air-datepicker-nav--title,
.air-datepicker-nav--action {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/*  Navigation action
   ------------------------------------------------- */

.air-datepicker-nav--action {
  width: var(--adp-day-cell-width);
  border-radius: var(--adp-border-radius);
  user-select: none;

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

  &:active {
    background: var(--adp-background-color-active);
  }

  &.-disabled- {
    visibility: hidden;
  }

  svg {
    width: 32px;
    height: 32px;
  }

  path {
    fill: none;
    stroke: var(--adp-nav-arrow-color);
    stroke-width: 2px;
  }
}

/*  Navigation title
   ------------------------------------------------- */

.air-datepicker-nav--title {
  border-radius: var(--adp-border-radius);
  padding: 0 8px;

  i {
    font-style: normal;
    color: var(--adp-nav-color-secondary);
    margin-left: .3em;
  }

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

  &:active {
    background: var(--adp-background-color-active);
  }

  &.-disabled- {
    cursor: default;
    background: none;
  }
}


/* -------------------------------------------------
    Datepicker buttons
   ------------------------------------------------- */

.air-datepicker-buttons {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}

.air-datepicker-button {
  display: inline-flex;
  color: var(--adp-btn-color);
  border-radius: var(--adp-btn-border-radius);
  cursor: pointer;
  height: var(--adp-btn-height);
  border: none;
  background: rgba(255, 255, 255, 0);

  &:hover {
    color: var(--adp-btn-color-hover);
    background: var(--adp-btn-background-color-hover);
  }

  &:focus {
    color: var(--adp-btn-color-hover);
    background: var(--adp-btn-background-color-hover);
    outline: none;
  }

  &:active {
    background: var(--adp-btn-background-color-active);
  }

  span {
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
}

/* -------------------------------------------------
    Timepicker
   ------------------------------------------------- */

$rangeTrackBg: #dedede;
$rangeThumbSize: 12px;

@mixin trackSelector {
  &::-webkit-slider-runnable-track {
    @content;
  }

  &::-moz-range-track {
    @content;
  }

  &::-ms-track {
    @content;
  }
}

@mixin thumbSelector {
  &::-webkit-slider-thumb {
    @content;
  }

  &::-moz-range-thumb {
    @content;
  }

  &::-ms-thumb {
    @content;
  }
}

@mixin thumb {
  box-sizing: border-box;
  height: $rangeThumbSize;
  width: $rangeThumbSize;
  border-radius: 3px;
  border: 1px solid var(--adp-time-track-color);
  background: #fff;
  cursor: pointer;

  transition: background var(--adp-transition-duration);
}

@mixin track {
  border: none;
  height: var(--adp-time-track-height);
  cursor: pointer;
  color: transparent;
  background: transparent;
}

.air-datepicker-time {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-column-gap: 12px;
  align-items: center;
  position: relative;
  padding: 0 var(--adp-time-padding-inner);

  .-only-timepicker- & {
    border-top: none;
  }
}

.air-datepicker-time--sliders {
}

.air-datepicker-time--current {
  display: flex;
  align-items: center;
  flex: 1;
  font-size: 14px;
  text-align: center;
}

.air-datepicker-time--current-colon {
  margin: 0 2px 3px;
  line-height: 1;
}

.air-datepicker-time--current-hours,
.air-datepicker-time--current-minutes {
  line-height: 1;
  font-size: 19px;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  position: relative;
  z-index: 1;

  &:after {
    content: '';
    background: var(--adp-background-color-hover);
    border-radius: 6px;
    position: absolute;
    left: -2px;
    top: -3px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    opacity: 0;
  }

  &.-focus- {
    &:after {
      opacity: 1;
    }
  }
}

.air-datepicker-time--current-ampm {
  text-transform: uppercase;
  align-self: flex-end;
  color: var(--adp-time-day-period-color);
  margin-left: 6px;
  font-size: 11px;
  margin-bottom: 1px;
}

.air-datepicker-time--row {
  display: flex;
  align-items: center;
  font-size: 11px;
  height: 17px;
  background:
          linear-gradient(to right,var(--adp-time-track-color), var(--adp-time-track-color))
          left 50%/100% var(--adp-time-track-height) no-repeat;

  &:first-child {
    margin-bottom: 4px;
  }

  input[type='range'] {
    background: none;
    cursor: pointer;
    flex: 1;
    height: 100%;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
    }

    &::-ms-tooltip {
      display: none;
    }

    &:hover {
      @include thumbSelector() {
        border-color: var(--adp-time-track-color-hover);
      }
    }

    &:focus {
      outline: none;

      @include thumbSelector() {
        background: var(--adp-cell-background-color-selected);
        border-color: var(--adp-cell-background-color-selected);
      }
    }

    //  Thumb
    // -------------------------------------------------

    @include thumbSelector() {
      @include thumb;
    }

    &::-webkit-slider-thumb {
      margin-top: calc(var(--adp-time-thumb-size) / 2 * -1);
    }

    //  Track
    // -------------------------------------------------
    @include trackSelector() {
      @include track;
    }

    &::-ms-fill-lower {
      background: transparent;
    }
    &:focus::-ms-fill-lower {

    }
    &::-ms-fill-upper {
      background: transparent;
    }
    &:focus::-ms-fill-upper {

    }
  }
}

[data-theme="dark"] {
  .itf-datepicker {
    &__dropdown {
      background-color: $dark-body-bg;
      border-color: $dark-border-color;
      box-shadow: 0 0 0 2px $dark-input-focus-border;
    }
  }
}

.itf-datepicker, .itf-monthpicker {
  &.with-addon .addon-end {
    pointer-events: all;
    padding-right: 0.25rem;
  }
  .form-control {
    border-radius: $input-border-radius !important;
  }

  &__dropdown {
    width: max-content;
    border: $input-border-width solid $input-border-color;
    border-radius: $input-border-radius;
    background-color: $body-bg;
    overflow: hidden;
    @if $enable-shadows {
      @include box-shadow($input-box-shadow, $input-btn-focus-box-shadow);
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: $input-btn-focus-box-shadow;
    }
  }
}


// range picker

.itf-daterange-picker {
  display: flex;
  .input-group-text.hidden {
    visibility: hidden;
  }

  &.with-addon .addon-end {
    pointer-events: all;
    padding-right: 0.25rem;
  }
  &__dropdown {
    width: max-content;
    overflow: hidden;
    border: $input-border-width solid $input-border-color;
    border-radius: $input-border-radius;
    background-color: $body-bg;
    @if $enable-shadows {
      @include box-shadow($input-box-shadow, $input-btn-focus-box-shadow);
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: $input-btn-focus-box-shadow;
    }
  }

  .form-control.focused, .form-control.focused input.form-control {
    background-color: $input-focus-border-color;
  }
  [data-theme="dark"] & {
    &__dropdown {
      box-shadow: 0 0 0 2px $dark-input-focus-border;
    }
    .form-control.focused, .form-control.focused input.form-control {
      background-color: $dark-input-focus-border-color;
    }
    .input-group-text {
      color: #fff;
    }
  }
  .form-control input.form-control {
    border: 0 none;
    padding: 0;
    max-width: 84px;
    box-shadow: none;

    &.placeholder-visible {
      max-width: none;
    }

    &:focus, &:active {
      border: 0;
      box-shadow: none;
    }
  }
  .input-group-text {
    border: 0 none;
    background: transparent;
  }
}


.itf-monthpicker {
  .form-control {
    background-color: $input-bg;

    &:focus {
      background-color: $body-bg;
    }
  }
  &__dropdown {
    width: max-content;
    border-radius: $input-border-radius;
    background-color: $body-bg;
    overflow: hidden;

    [data-theme="dark"] & {
      background-color: $dark-body-bg;
    }
  }
}


.itf-periodpicker {
  .form-control {
    background-color: $input-bg;

    &:focus {
      background-color: $body-bg;
    }
  }

  .air-datepicker {
    --adp-font-family: #{$font-family-base};
    --adp-color-current-date: #{$primary};
    --adp-cell-background-color-selected: #{$primary};
    --adp-cell-background-color-selected-hover: #{lighten($primary, 10%)};
    --adp-day-name-color: #{$secondary};
  }

  &__quarters {
    gap: 5px;
  }
  &__quarters, &__months {
    display: flex;
  }

  &__month {
    flex: 1 1 auto;
    border-radius: 0;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    font-size: 14px;
  }

  &__quarter {
    flex: 1 1 33.3%;
    cursor: pointer;
    color: var(--grey);
    background-color: rgba(0, 0, 0, 0.04);
    height: 125px;
    width: 125px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: $input-border-radius;
    overflow: hidden;
    text-align: right;

    &:hover {
      background-color: rgba(9, 30, 66, 0.08);
    }
    &.active-inside {
      background-color: rgba(9, 30, 66, 0.08);
    }
    &.active {
      background-color: $primary;
      color: #fff;

      .itf-periodpicker__month {
        color: #fff;
      }
    }

    .quarter-number {
      font-size: 36px;
    }
  }

  &__dropdown {
    padding: 10px 15px;
    min-width: 400px;
    width: max-content;
    border: $input-border-width solid $input-border-color;
    border-radius: $input-border-radius;
    background-color: $body-bg;
    overflow: hidden;
    @if $enable-shadows {
      @include box-shadow($input-box-shadow, $input-btn-focus-box-shadow);
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: $input-btn-focus-box-shadow;
    }

    [data-theme="dark"] & {
      background-color: $dark-body-bg;
      border-color: $dark-border-color;
      box-shadow: 0 0 0 2px $dark-input-focus-border;
    }

    .btn-whole {
      background-color: rgba(0, 0, 0, 0.04);
    }
  }
}
