@import "../../../assets/scss/variables";

:root {
  --date-range-header-bg: $blue-to-gray; // replace with your $blue-to-gray if defined
  --date-range-content-bg: #040059;
  --date-range-text: white;
  --date-range-error: #ff4d4f; // fallback, or map to $error-color
  --date-range-apply-bg: white;
  --date-range-apply-text: #040059;
}

:root[data-theme="dark"] {
  --date-range-header-bg: #40474F;
  --date-range-content-bg: #40474F;
  --date-range-text: #ccc;
  --date-range-error: #ff6b6b; // lighter red for dark mode
  --date-range-apply-bg: #20262E;
  --date-range-apply-text: #fff;
}

.date-range-picker {
  position: relative;
  width: max-content;

  &__head {
    width: 100%;
    height: 37px;
    background-color: var(--blue-to-gray);
    color: var(--white);
    padding-left: 17px;
    border: none;
border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    user-select: none;
    .clear-btn{
      margin-right: 5px;
    }
    .down-arrow {
      padding-right: 22px;

    }


    span {
      color: var(--date-range-text);
      min-width: max-content;
      font-size: 1.4rem;
    }

    img {
      width: 10px;
    }
  }

  &__content {

    .rendered-date-time input {
      color:var(--date-range-text);
    }
    border-radius: 5px;
    position: absolute;
    top:0;
    background-color: var(--date-range-content-bg);
    padding: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--date-range-text);
    width: 250px;

    label {
      font-weight: bold;
      margin-top: 10px;
    }

    select {
      padding: 5px;
      border-radius: 4px;
      border: none;
      outline: none;
    }

    .apply-button {
      margin-top: 20px;
      background-color: var(--date-range-apply-bg);
      color: var(--date-range-apply-text);
      border: none;
      padding: 8px;
      border-radius: 4px;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.2s;

      &:hover {
        opacity: 0.9;
      }
    }
  }

  &__close {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    color: var(--date-range-text);
  }

  .error-message {
    color: var(--date-range-error);
    font-size: 1.2rem;
    padding-left: 4px;
    margin-top: 5px;
  }
}