/*
  Date Range Picker Styles
  ------------------------------------------------------------------------------
*/

.range-picker {
  position: fixed;
  text-align: center;
  background-color: $g1-raven;
  border: $ix-border solid $c-pool;
  padding: $ix-marg-b;
  border-radius: $ix-radius;
  z-index: 9999;
  
  .react-datepicker {
    font-family: $ix-text-font;
    font-size: $ix-text-base-1;
  }
  
  .range-picker--date-pickers {
    flex-wrap: nowrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: $ix-marg-b;
    
    .range-picker--date-picker {
      margin: $ix-marg-a;
      margin-top: 0;

      .react-datepicker-wrapper,
      .react-datepicker__input-container {
        width: 100%;
      }

      .range-picker--calendar-container {
        position: relative;
      }
    
      .range-picker--calendar {
        background-color: transparent;
        border: none;
        color: $c-pool;
        display: flex;
        flex-direction: row;
        align-items: stretch;

        .react-datepicker__month-container {
          background-color: $g3-castle;
          border-radius: $ix-radius $ix-radius;
          width: 260px;
        }

        .react-datepicker__navigation {
          outline: none;
          cursor: pointer;
        }

        .react-datepicker__navigation--next {
          border-left-color: $g18-cloud;
        }

        .react-datepicker__navigation--previous {
          border-right-color: $g18-cloud;
        }
        
        .range-picker--day {
          color: $g7-graphite;

          &:hover {
            background-color: $c-laser;
            color: $g20-white;
          }
        }

        .range-picker--day-in-month {
          color: $g14-chromium;
          
          &:hover {
            background-color: $c-laser;
            color: $g20-white;
          }
        }

        .react-datepicker__day--selected {
          background-color: $c-pool;
          color: $g18-cloud;
        }

        .react-datepicker__triangle {
          display: none;
        }

        .react-datepicker__header {
          
          border-radius: 0;
          padding: 0;
          border: none;
          background: transparent;

          .react-datepicker__day-name {
            color: $c-rainforest;
            font-weight: 700;
          }
          
          .react-datepicker__current-month {
            width: 100%;
            border-radius: $ix-radius $ix-radius 0 0;
            background-color: $g4-onyx;
            color: $g18-cloud;
            font-weight: 700;
            height: $ix-marg-d;
            display: inline-flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
          }
        }
        
        .react-datepicker__time-container {
          width: 70px;
          border: none;
          margin-left: $ix-border;
          border-radius: $ix-radius;
          background-color: transparent;
          display: flex;
          flex-direction: column;
          
          .react-datepicker__header--time {
            width: 100%;
            border-radius: $ix-radius $ix-radius 0 0;
            background-color: $g4-onyx;
            font-weight: 700;
            flex: 0 0 $ix-marg-d;
            display: inline-flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
          }

          .react-datepicker-time__header {
            color: $g18-cloud;
          }

          .react-datepicker__time {
            flex: 1 0 calc(100% - #{$ix-marg-d});
            background-color: transparent;

            .react-datepicker__time-box {
              width: 100%;
              height: 100%;
              background-color: $g3-castle;
              color: $g14-chromium;
              border-radius: 0 0 $ix-radius $ix-radius;
              position: relative;

              .react-datepicker__time-list {
                position: absolute;
                width: 100%;
                height: 100%;
                font-size: $ix-text-base;
                @include custom-scrollbar-round($g3-castle, $c-pool);

                .react-datepicker__time-list-item {
                  height: initial;
                  padding: $ix-marg-a $ix-marg-b;
                  transition: background-color 0.25s ease, color 0.25s ease;
                  line-height: 1.25em;
                  margin: 0;
                }

                .react-datepicker__time-list-item:hover {
                  background-color: $g6-smoke;
                  color: $g20-white;
                }

                .react-datepicker__time-list-item--selected,
                .react-datepicker__time-list-item--selected:hover {
                  background-color: $c-pool;
                }

              }
            }
          }
        }

      }
    }
  }
}

.range-picker--submit {
  margin-bottom: $ix-marg-b;
}

.range-picker--dismiss {
  position: absolute;
  z-index: 5000;
  top: 0;
  right: 0;
  transform: translate(50%,-50%);
  width: 24px;
  height: 24px;
  outline: none;
  border-radius: 50%;
  background-color: $c-pool;
  transition: background-color 0.25s ease;
  border: 0;

  &:before,
  &:after {
    content: '';
    position: absolute;
    width: 13px;
    height: 3px;
    top: 50%;
    left: 50%;
    border-radius: 1px;
    background-color: $g20-white;
  }

  &:before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  &:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  &:hover {
    background-color: $c-laser;
    cursor: pointer;
  }
}
