/* SEARCH POPOUT */
%themeDark %searchPopout {
  background-color: cv('bg.general.popout');
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  animation: cv-menu-fold-y 0.2s cubic-bezier(0.2, 0.6, 0.5, 1.1) 0.1s backwards;
  transform-origin: 50% 0;
}
%searchPopout {
  // SEARCH RESULTS GROUP
  > %searchPopoutResultsGroup {
    &:after {
      border-top: 1px solid transparent;
    }
    + %searchPopoutResultsGroup {
      &:after {
        border-top-color: hsla(0, 0%, 100%, 0.04);
      }
    }
    > %searchPopoutHeader {
      color: $main-color;
      font-weight: 700;
    }
    > %searchPopoutLearnMore,
    > %searchPopoutClearHistory {
      opacity: 0.5;
      transition: all 0.15s ease-in-out;
      &:hover {
        opacity: 1;
      }
      > a {
        color: #fff;
      }
    }
  }

  // SEARCH OPTION
  %searchPopoutOption {
    transition: all 0.15s ease-in-out;
    &:after {
      display: none;
    }
    %searchPopoutPlusIcon {
      display: block;
      color: #fff;
      opacity: 0;
      transition: all 0.15s ease-in-out;
    }
    &:hover {
      %searchPopoutPlusIcon {
        opacity: 0.7;
      }
    }
    %searchPopoutFilter {
      color: hsla(0, 0%, 100%, 0.3);
      transition: all 0.15s ease-in-out;
    }
    %searchPopoutAnswer {
      color: hsla(0, 0%, 100%, 0.5);
      font-weight: 500;
      transition: all 0.15s ease-in-out;
    }
    %searchPopoutNonText {
      color: hsla(0, 0%, 100%, 0.5);
      transition: all 0.15s ease-in-out;
    }
    > strong {
      color: hsla(0, 0%, 100%, 0.7);
      transition: all 0.15s ease-in-out;
    }

    // SELECTED
    &[aria-selected='true'] {
      background-color: hsla(0, 0%, 100%, 0.1);
      %searchPopoutPlusIcon {
        opacity: 0.3;
        &:hover {
          opacity: 0.7;
        }
      }
      %searchPopoutFilter {
        color: hsla(0, 0%, 100%, 0.5);
      }
      %searchPopoutAnswer,
      %searchPopoutNonText {
        color: hsla(0, 0%, 100%, 0.7);
      }
      > strong {
        color: #fff;
      }
    }

    // OPTION USER
    &%searchPopoutOptionUser {
      %searchPopoutDisplayedNick {
        color: hsla(0, 0%, 100%, 0.5);
        transition: all 0.15s ease-in-out;
      }
      %searchPopoutDisplayUsername {
        color: hsla(0, 0%, 100%, 0.3);
        transition: all 0.15s ease-in-out;
      }
      &%searchPopoutOptionSelected {
        %searchPopoutDisplayedNick {
          color: hsla(0, 0%, 100%, 0.7);
        }
        %searchPopoutDisplayUsername {
          color: hsla(0, 0%, 100%, 0.5);
        }
      }
    }

    // OPTION CHANNEL
    > %searchPopoutChannel {
      > strong {
        color: hsla(0, 0%, 100%, 0.7);
        transition: all 0.15s ease-in-out;
      }
      > %searchPopoutChannelIcon,
      > %searchPopoutChannelCategory {
        color: hsla(0, 0%, 100%, 0.3);
        transition: all 0.15s ease-in-out;
      }
    }
    &%searchPopoutOptionSelected {
      > %searchPopoutChannel {
        > strong {
          color: #fff;
        }
        > %searchPopoutChannelIcon,
        > %searchPopoutChannelCategory {
          color: hsla(0, 0%, 100%, 0.5);
        }
      }
    }
  }

  // QUERY CONTAINER
  %searchPopoutQueryContainer {
    background-color: $main-color;
    > %searchPopoutQueryText {
      color: hsla(0, 0%, 100%, 0.7);
      > strong {
        color: #fff;
      }
    }
  }

  // SEARCH DATEPICKER
  %searchPopoutDatePicker {
    %searchPopoutDatePickerHint {
      border-top: 1px solid hsla(0, 0%, 100%, 0.04);
      %searchPopoutHint {
        color: hsla(0, 0%, 100%, 0.7);
      }
      %searchPopoutHintValue {
        background-color: $main-color;
        color: #fff;
        transition: all 0.15s ease-in-out;
        &:hover {
          background-color: $hover-color;
        }
      }
    }
  }
}

// DATEPICKER
%themeDark %calendarPicker {
  %datepicker,
  %datepickerHeader {
    background-color: rgba(0, 0, 0, calc($bg-shading * 0.8));
  }
  > %datepicker {
    %datepickerNavigation {
      background-color: hsla(0, 0%, 100%, 0.1);
      border: 1px solid transparent;
      opacity: 0.7;
      transition: all 0.15s ease-in-out;
      &:hover {
        background-color: $main-color;
        opacity: 1;
      }
    }
  }
  %datepickerCurrentMonth {
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.04);
    color: $main-color;
    font-weight: 600;
  }
  %datepickerDayName {
    color: hsla(0, 0%, 100%, 0.7);
  }
  %datepickerWeek {
    &:last-of-type {
      > %datePickerDay {
        border-bottom: 1px solid hsla(0, 0%, 100%, 0.04);
      }
    }
    > %datepickerDay {
      background-color: hsla(0, 0%, 100%, 0.1);
      border-left: 1px solid hsla(0, 0%, 100%, 0.04);
      border-top: 1px solid hsla(0, 0%, 100%, 0.04);
      color: hsla(0, 0%, 100%, 0.7);
      transition: all 0.15s ease-in-out;
      &:last-of-type {
        border-right: 1px solid hsla(0, 0%, 100%, 0.04);
      }
      &:hover {
        background-color: $main-color;
        color: #fff;
      }
    }
    > %datepickerDaySelected {
      box-shadow: inset 0 -3px $main-color;
      &:after {
        display: none;
      }
    }
    > %datepickerDayToday {
      color: $main-color;
      font-weight: 700;
    }
    > %datepickerDayDisabled,
    > %datepickerDayOutsideMonth {
      background-color: transparent;
      color: hsla(0, 0%, 100%, 0.1);
      &:hover {
        background-color: transparent;
        color: hsla(0, 0%, 100%, 0.1);
      }
    }
  }
}
