@import './../../styles/_base';

$color-today: $color-secondary;
$color-selected: $color-primary;
$color-selected-text: $color-white;
$color-in-range: lighten($color-selected, 20%);
$color-border: $color-border;
$color-background: $color-white;
$color-button-hover: #e9e9e9;

ngx-input-datepicker {
  display: inline-block;
  max-width: 300px;
  min-width: 250px;
  width: 100%;
  font-size: 16px;
  line-height: 1.5em;
  --color-today: #{$color-today};
  --color-selected: #{$color-selected};
  --color-selected-text: #{$color-selected-text};
  --color-in-range: #{$color-in-range};
  --color-border: #{$color-border};
  --color-background: #{$color-background};
  --color-button-hover: #{$color-button-hover};
}

.ngx-input-datepicker {
  font-size: 16px;
  line-height: 1.5em;
  border: 1px solid var(--color-border);
  padding: 8px 4px;
  background-color: $color-background;
  background-color: var(--color-background);

  &__top-nav {
    display: flex;
    margin-bottom: 6px;
  }

  &__title {
    text-align: center;
    flex: 1 1 0%;
    flex-basis: 0%;
  }

  &__prev,
  &__next {
    flex-basis: auto;
    width: 30px;
    font-size: 14px;
    margin: 0 4px;
  }

  &__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 10px;
    text-align: center;
    margin-bottom: 6px;
    font-size: 14px;
  }

  &__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }

  &__btn {
    cursor: pointer;
    border: 0;
    background-color: transparent;
    height: 30px;
    text-align: center;

    &:hover {
      transform: scale(1.2);
      background-color: $color-button-hover;
      background-color: var(--color-button-hover);
    }

    &:disabled,
    &[disabled] {
      background-color: $color-button-hover;
      background-color: var(--color-button-hover);
      transform: scale(1);
      cursor: initial;
    }
  }

  &__in-range-date {
    background-color: $color-in-range;
    background-color: var(--color-in-range);
    color: $color-selected-text;
    color: var(--color-selected-text);

    &:hover {
      background-color: $color-in-range;
      background-color: var(--color-in-range);
    }
  }

  &__today {
    color: $color-today;
    color: var(--color-today);
  }

  &__selected-date,
  &__start-date,
  &__end-date {
    background-color: $color-selected;
    background-color: var(--color-selected);
    color: $color-selected-text;
    color: var(--color-selected-text);

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

  // input
  &__show-input {
    position: relative;

    .ngx-input-datepicker {
      position: absolute;
      bottom: -263px;
      height: 264px;
      z-index: 2;
    }
  }

  &__input-wrap {
    position: relative;
  }

  &__input {
    width: 100%;
  }

  &__clear-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0 10px;
    font-size: 20px;
  }
}
