.ncsearchtrigger {
  cursor: pointer;
  padding: 0 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: var(--trigger-color, currentColor);
  transition: 0.3s;
}

.ncsearchtrigger:after {
    content:'';
    display: block;
    width: 45px;
    height: 45px;
    position: absolute;
    left: -40%;
    top: -90%;
}

.ncsearchtrigger:hover {
    color:var(--trigger-hover-color, currentColor);
}


/* Search form, field, and close button */

.ncsearchreveal {
  --bg-color-start: var(--red);
  --bg-color-end: #333;
  --text-color: #fff;
  --text-size: 1.2em;
  --text-align: left;
  --field-padding: 0.5rem 1.5rem;
  --field-border: solid 1px #000;
  --x-button-size: 1em;
  --x-button-color: #fff;
  --x-button-color-hover: #fff;
  --s-height: 100px;
}

.ncsearchreveal {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:var(--s-height);
  margin:0;
  z-index: 10;

  /* for the positioning of the close button */
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-left:1.5rem;
  padding-right:1.5rem;

  /* Must be hidden for header elements to interactive */
  visibility:hidden;
}


.ncsearchreveal_input {
  position:absolute;
  left:0;
  bottom:100%;
  height:100%;
  width:100%;
  padding:var(--field-padding);
  border:var(--field-border);
  outline:none;
  font-size:var(--text-size);
  background-color:var(--bg-color-start);
  color:var(--text-color);
  z-index:4;
  text-align: left;
  transition:0.3s;
  visibility:visible; /* Must be visible to be interactive */
  --placeholder-font-style: italic;
  --placeholder-opacity: 0.4;
}

@media(min-width:600px){

  .ncsearchreveal_input {
    text-align: center;
  }

}

.editor-styles-wrapper .ncsearchreveal,
.editor-styles-wrapper .ncsearchreveal_input {
  visibility: hidden;
  display: none !important;
}

/* Currently this is hidden in place of a close field button */

.ncsearchreveal_input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height:1.5rem;
  width: 1.5rem;
  cursor:pointer;

  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  display:none;
}

.ncsearchreveal_input:focus {
  bottom:0;
  top:auto;
  box-shadow:0 0 1em rgba(0,0,0,0.3);
  background-color:var(--bg-color-end);
}

.ncsearchreveal_close {
  padding: 0 1.5rem;
  background: none;
  border: none;
  display: block;
  cursor: pointer;
  transition: 0.1s;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 0;
  height: 100%;
}

.ncsearchreveal_input:focus + .ncsearchreveal_close{
  visibility:visible;
  z-index:6;
  opacity:1;
}

.ncsearchreveal_x {
    font-size:var(--x-button-size); 
    display:block; 
    color:var(--x-button-color);
    transition:0.3s;
}

.ncsearchreveal_x:hover {
    color:var(--x-button-color-hover);
}