@use 'variables';

/* 
 * Notice: Some styles need !important signatures as the plugin 
 * styles are stronger because they use [data-xxxx] attributes
 */

.daterangepicker.show-calendar {
  background-color: variables.$secondary-background-color;
  // border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 1);

  * {
    background-color: variables.$secondary-background-color;
  }

  border: none;

  .calendar-table,
  .drp-buttons {
    border: none;
  }

  .drp-calendar.left {
    border-left: none !important;
  }

  .calendar-table {
    background-color: variables.$secondary-background-color !important;
  }

  input.yearselect,
  select.monthselect,
  .prev,
  .next {
    color: variables.$text-color;
  }

  td {
    background-color: variables.$background-color;
    // font-weight:
    font-size: 18px;
    box-sizing: border-box;
    border: 3px solid variables.$secondary-background-color !important;
    border-radius: 10% !important;

    &.in-range {
      background-color: variables.$standout-background-color;
      color: variables.$text-color;
    }

    &.off {
      // background-color: variables.$secondary-background-color;
      visibility: hidden;
    }

    // .active.in-range
    &.start-date,
    &.end-date {
      background-color: variables.$standout-color;

      &.off {
        // background-color: darken(variables.$standout-color, 40%);
        visibility: hidden;
      }
    }
  }

  .ranges {
    li {
      background-color: variables.$secondary-background-color;
      color: variables.$text-color;
      border: none;
      border-radius: variables.$border-radius;
      padding: 0.3em 0.5em;
      margin: 0.1em 0.8em;
      cursor: pointer;

      width: auto;
      margin-right: auto;
      white-space: nowrap;
      inline-size: min-content;

      &:hover {
        background-color: variables.$standout-background-color;
        color: variables.$text-color;
      }

      &.active {
        background-color: variables.$standout-background-color;
        color: variables.$standout-color;
      }
    }
  }

  th.next,
  th.prev {
    border-radius: 10%;

    &:hover {
      background-color: variables.$standout-background-color;

      span {
        border-color: variables.$standout-color;
      }
    }

    span {
      border-color: variables.$text-color;
    }
  }

  .applyBtn,
  .cancelBtn {
    font-weight: 400 !important;
  }
}

.vue-daterange-picker {
  .form-control {
    opacity: 1;
    border: none;
    border-radius: calc(#{variables.$border-radius} / 2);
  }
}

.form-control.reportrange-text {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
}