/* ======================================= */
/* CSS for control sap.ushell/ShellHeader  */
/* Horizon theme                           */
/* ======================================= */

html.sap-phone #CEPSearchField.sapMFocus>.sapMSFF::before {
  border: 0.125rem solid #0070f2;
  position: absolute;
  content: " ";
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none
}

// Placeholder SearchField in CEP
#PlaceHolderSearchField>.sapMSFF {
  border-radius: 1.125rem;
  background-color: @sapShell_InteractiveBackground;
  border: none;
  color: @sapShell_InteractiveTextColor;
  background: none;
  background-color: @sapShell_InteractiveBackground;

  &:focus {
    background-color: @sapShell_Hover_Background;
    border: @sapButton_Lite_Active_BorderColor;
    color: @sapButton_Emphasized_Background;
  }

  &:hover {
    background-color: @sapShell_Hover_Background;
    box-shadow: @sapContent_Interaction_Shadow;
  }
}

.sapUshellCEPSearchFieldMargin {
  margin-top: 0.1rem !important;
}

// Placeholder SearchField - placholder text
#PlaceHolderSearchField-I::placeholder {
  color: @sapField_PlaceholderTextColor;
  font-style: italic;
}

// SearchField in popover - CEP
#CEPSearchField>.sapMSFF {
  border-radius: 1.125rem;
  height: 2.25rem !important;
  background-color: @sapShell_InteractiveBackground;
  border: none;
  color: @sapShell_InteractiveTextColor;
  background: none;
  background-color: @sapShell_InteractiveBackground;

  &:hover {
    background-color: @sapShell_Hover_Background;
    box-shadow: @sapContent_Interaction_Shadow;
  }

  &:focus-within {
    background-color: @sapShell_Hover_Background;
    border: @sapButton_Lite_Active_BorderColor;
    color: @sapButton_Emphasized_Background;
  }
}

// SearchField in popover - placholder text
#CEPSearchField-I::placeholder {
  color: @sapField_PlaceholderTextColor;
  font-style: italic;
}

/** Clear Search Button **/
#PlaceHolderSearchField-search {
  border-radius: 1.125rem !important;
  height: 1.75rem;
  width: 1.75rem;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 6px;
  line-height: 2;

  &:hover {
    background-color: @sapShell_Hover_Background;
    box-shadow: @sapContent_Interaction_Shadow;
    color: @sapShell_InteractiveTextColor;
  }

  &:active {
    background-color: @sapShell_Active_Background;
    border: 1px solid @sapButton_Lite_Active_BorderColor;
    color: @sapShell_Active_TextColor;
  }
}

#PlaceHolderSearchField-reset {
  border-radius: 1.125rem !important;
  height: 1.75rem;
  width: 1.75rem;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 6px;
  line-height: 2;

  &:hover {
    background-color: @sapShell_Hover_Background;
    box-shadow: @sapContent_Interaction_Shadow;
    color: @sapShell_InteractiveTextColor;
  }

  &:active {
    background-color: @sapShell_Active_Background;
    border: 1px solid @sapButton_Lite_Active_BorderColor;
    color: @sapShell_Active_TextColor;
  }
}

#CEPSearchField-search {
  border-radius: 1.125rem;
  height: 1.75rem;
  width: 1.75rem;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 6px;

  &:hover {
    background-color: @sapShell_Hover_Background;
    box-shadow: @sapContent_Interaction_Shadow;
    color: @sapShell_InteractiveTextColor;
  }

  &:focus {
    background-color: @sapShell_Active_Background;
    border-color: @sapButton_Lite_Active_BorderColor;
    color: @sapShell_Active_TextColor;
  }
}

#CEPSearchField-reset {
  border-radius: 1.125rem !important;
  height: 1.75rem;
  width: 1.75rem;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 6px;

  &:hover {
    background-color: @sapShell_Hover_Background;
    box-shadow: @sapContent_Interaction_Shadow;
    color: @sapShell_InteractiveTextColor;
  }

  &:active {
    background-color: @sapShell_Active_Background;
    border: 1px solid @sapButton_Lite_Active_BorderColor;
    color: @sapShell_Active_TextColor;
  }
}

#CEPSearchField.sapMSFVal>.sapMSFF .sapMSFS {
  background-color: @sapButton_Emphasized_Background;
  color: @sapButton_Emphasized_TextColor;
}

.sapUshellCEPSearchFieldPopover {
  border-radius: 1.125rem;
  padding-bottom: 0.5rem;
}

.sapUshellCEPSearchFieldMargin {
  margin-top: 0.1rem !important;
}

.searchCEPList>.sapMListHdrText {
  font-family: inherit
}

.searchCEPlistItemIcon {
  color: #758ca4 !important;
}