// Variables
$primary-color: #007bff;
$secondary-color: #e6f7ff;
$disabled-opacity: 0.5;
$border-radius: 4px;
$box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
$transition-duration: 0.3s;
$transition-ease: ease-in-out;

// Main DatePicker Container
.dry-date-picker {
  position: relative;

  // Position Modifiers
  &--top {
    .dry-date-picker__container {
      bottom: 100%;
      left: 0;
      margin-bottom: 1rem;
      animation: slideUp $transition-duration $transition-ease;
    }
  }

  &--bottom {
    .dry-date-picker__container {
      top: 100%;
      left: 0;
      margin-top: 1rem;
      animation: slideDown $transition-duration $transition-ease;
    }
  }

  &--left {
    .dry-date-picker__container {
      top: 0;
      right: 100%;
      margin-right: 1rem;
      animation: slideLeft $transition-duration $transition-ease;
    }
  }

  &--right {
    .dry-date-picker__container {
      top: 0;
      left: 100%;
      margin-left: 1rem;
      animation: slideRight $transition-duration $transition-ease;
    }
  }

  &__day--current {
    border: 1px solid var(--Gray-300, #d0d5dd);
    background: var(--Primary-600, #002b7a);
  }

  &__nav-input-wrapper {
    min-width: 300px;
    display: flex;
  }
}

// Animations
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(1rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-1rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  0% {
    opacity: 0;
    transform: translateX(1rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  0% {
    opacity: 0;
    transform: translateX(-1rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

// DatePicker Container
.dry-date-picker__container-display,
.dry-date-picker__container {
  z-index: 1000;
  background: #ffffff;
  border: 1px solid #ccc;
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

.dry-date-picker__container {
  position: absolute;
}

// Navigation
.dry-date-picker__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #ccc;
}

// Time Selector
.dry-date-picker__time-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;

  &-input {
    width: 50px;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: $border-radius;
    text-align: center;
    transition: border $transition-duration $transition-ease;
    &:focus {
      border-color: $primary-color;
    }
  }
}

// Date Grid
.dry-date-picker__date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.dry-date-picker {
  &__day {
    display: flex;
    padding: 16.553px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 0.828px solid var(--Gray-300, #d0d5dd);
    // width: 40px;
    // height: 40px;
    cursor: pointer;
    transition: background-color $transition-duration $transition-ease,
      color $transition-duration $transition-ease;

    &--label,
    &--empty {
      cursor: default;
      background-color: transparent;
    }

    &--disabled {
      cursor: not-allowed;
      opacity: $disabled-opacity;
      background-color: gray;
    }

    &--today {
      border: 2px solid $primary-color;
    }

    &--holiday {
      background-color: lighten($secondary-color, 10%);
    }

    &--selected {
      background-color: $primary-color;
      color: #fff;
    }

    &--in-range {
      background-color: $secondary-color;
    }

    &--hovered {
      background-color: darken($secondary-color, 10%);
    }
    &--disabledHovered {
      background-color: darkgray;
    }
  }

  &__day-text {
    display: flex;
    width: 19.864px;
    height: 19.864px;
    flex-direction: column;
    justify-content: center;
    color: var(--Base-Black, #000);
    text-align: center;
    font-variant-numeric: lining-nums tabular-nums;
    font-family: Inter;
    font-size: 11.587px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
}

// ========================================
// Media Queries
// ========================================
// Adjusting desktop screens
@media (min-width: 1024px) {
}
// Adjusting  for tablet screens (between small tablets and desktops)
@media (max-width: 1023px) {
  .dry-data-table {
  }
}
// Adjusting for smaller screens (small tablets and mobile)
@media (max-width: 768px) {
  .dry-date-picker {
    &__day {
      padding: 10px;
    }
  }
}
// Adjusting  for smaller screens (mobile)
@media (max-width: 480px) {
  .dry-date-picker {
    &__day {
      padding: 10px;
    }
  }
}