// Insight Search Styles
ins-container-width = 640px
ins-text-grey = #9a9a9a
ins-border-grey = #e2e2e2
ins-background-grey = #f7f7f7
ins-background-orange = #e78170

$ins-full-screen
  top: 0
  left: 0
  margin: 0
  width: 100%
  height: 100%

.ins-search
  display: none
  &.show
    display: block

.ins-selectable
  cursor: pointer

.ins-search-mask,
.ins-search-container
  position: fixed

.ins-search-mask
  top: 0 !important
  left: 0 !important
  width: 100% !important
  height: 100% !important
  z-index: 8000 !important
  background: rgba(0,0,0,0.5) !important

.ins-input-wrapper
  position: relative

.ins-search-input
  width: 100% !important
  height: 100% !important
  border: none !important
  outline: none !important
  font-size: 16px !important
  box-shadow: none !important
  font-weight: 200 !important
  border-radius: 0 !important
  background: white !important
  line-height: 20px !important
  box-sizing: border-box !important
  padding: 12px 28px 12px 20px !important
  border-bottom: 1px solid ins-border-grey !important
  font-family: "Microsoft Yahei Light", "Microsoft Yahei", Helvetica, Arial, sans-serif !important

.ins-close
  top: 50%
  right: 6px
  width: 20px
  height: 20px
  font-size: 16px
  margin-top: -11px
  position: absolute
  text-align: center
  display: inline-block
  &:hover
    color: ins-background-orange

.ins-search-container
  right: 50%
  top: 100px !important
  z-index: 8001 !important
  bottom: 100px !important
  box-sizing: border-box !important
  width: ins-container-width !important
  margin-right: -(ins-container-width/2) !important
  border-top: 2px solid color-theme !important
  @media screen and (max-width: 559px), screen and (max-height: 479px)
    top: 0
    right: 0% !important
    margin: 0 !important
    width: 100% !important
    height: 80%
    background: ins-background-grey

.ins-section-wrapper
  left: 0 !important
  right: 0 !important
  top: 45px !important
  bottom: 0 !important
  overflow-y: auto !important
  position: absolute !important

.ins-section-container
  position: relative !important
  background: ins-background-grey !important

.ins-section
  font-size: 14px !important
  line-height: 16px !important
  .ins-section-header,
  .ins-search-item
    padding: 8px 15px !important
  .ins-section-header
    color: ins-text-grey !important
    border-bottom: 1px solid ins-border-grey !important
  .ins-slug
    margin-left: 5px !important
    color: ins-text-grey !important
    &:before
      content: '('
    &:after
      content: ')'
  .ins-search-item
    header,
    .ins-search-preview
      overflow: hidden !important
      white-space: nowrap !important
      text-overflow: ellipsis !important
    header
      .fa
        margin-right: 8px !important
    .ins-search-preview
      height: 15px !important
      font-size: 12px !important
      color: ins-text-grey !important
      margin: 5px 0 0 20px !important
    &:hover,
    &.active
      color: white !important
      background: ins-background-orange !important
      .ins-slug,
      .ins-search-preview
        color: white !important