@use 'backend' as *;

#{c(popouts search container)} {
  background: cv('shading.popout');
  border: none;
}

// QUERY
#{c(popouts search query)} {
  background: transparent;
}

// OPTIONS
#{c(popouts search option)} {
  &:hover {
    background-color: cv('color.hover');
    :is(#{c(popouts search filter)}, #{c(popouts search answer), #{c(popouts search plusIcon)}}) {
      color: var(--interactive-active);
    }
    :is(#{c(popouts search resultChannelIcon)}, #{c(popouts search resultChannelCategory)}) {
      opacity: 1;
    }
    strong {
      //channel name
      color: var(--interactive-active);
    }
  }
  &[aria-selected='true'] {
    background-color: cv('color.hover');
    box-shadow: none;
    :is(strong, #{c(popouts search plusIcon)}) {
      color: var(--interactive-active);
    }
  }
}

// DATEPICKER
#{c(popouts search datePicker)} {
  #{c(popouts search datePickerHint)} {
    #{c(popouts search hintValue)} {
      background: cv('color.main');
      padding: 0 5px;
    }
  }
}

// CALENDAR
#{c(popouts search calendar picker)} {
  #{c(popouts search calendar datePicker)},
  #{c(popouts search calendar header)} {
    background: transparent;
  }

  // MONTH NAME
  #{c(popouts search calendar currentMonth)} {
    color: cv('color.main');
  }

  // DAY NAME
  :is(#{c(main themeLight)}, #{c(main themeDark)}) & {
    #{c(popouts search calendar dayName)} {
      color: var(--header-primary);
    }
  }

  // DAYS
  #{c(popouts search calendar month)} {
    border: 1px solid cv('color.main');
    background: cv('shading.card');
    border-radius: 4px;
  }

  // TODAY
  #{c(popouts search calendar day)} {
    &#{c(popouts search calendar daySelected)} {
      &::after {
        background: cv('color.main');
      }
    }
  }

  // HOVER
  #{c(popouts search calendar day)} {
    &:is(#{c(popouts search calendar dayKeyboardSelected)}, #{c(popouts search calendar daySelected)}:hover, :hover) {
      background: cv('color.main');
    }
  }

  // DISABLED
  :is(#{c(main themeLight)}, #{c(main themeDark)}) & {
    #{c(popouts search calendar day)} {
      &:is(#{c(popouts search calendar dayDisabled)}, #{c(popouts search calendar dayDisabled)}:hover) {
        background: transparent;
      }
    }
  }
}
