/* SEARCH POPOUT */
%themeDark %searchPopout {
  background-color: rgba(0, 0, 0, 0.8);
  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;
      }
    }
    %searchPopoutKeybindShortcut {
      >span {
        border-color: hsla(0, 0%, 100%, 0.5);
        box-shadow: inset 0 -4px hsla(0, 0%, 100%, 0.7);
        &:hover {
          background-color: transparent;
        }
        &:active {
          border-color: hsla(0, 0%, 100%, 0.5);
          box-shadow: inset 0 -2px hsla(0, 0%, 100%, 0.7);
          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: transparent;
  }
  >%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);
      }
    }
  }
}