.webien-search-addon-container {
  position: relative;
  .search-form {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 2;

    .input-txt {
      display: flex;

      &.submit-left {
        flex-direction: row-reverse;
      }

    }

    input[type="text"] {
      -webkit-box-shadow: none;
      box-shadow: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      outline: none;

      /* Standard appearance */
      border: 2px solid #F2F2F2F2;
      padding: 10px 15px;
      border-radius: 0;
      width: 100%;

      &:active,
      &:focus {
        outline: none;
      }

    }
    button {
      -webkit-box-shadow: none;
      box-shadow: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      display: flex;
      align-items: center;
      /* Standard appearance */
      background: #202020;
      color: #FFF;
      border: 0;
      border-radius: 0;
      cursor: pointer;

      &.button-icon {
        &:before {
          content: "";
          position: relative;
          height: 1em;
        }
      }

    }
    &.has-text {
      button {
        &.icon-left {
          i {
            order: 1;
            margin-right: 5px;
          }
          span {
            order: 2;
          }
        }
        &.icon-right {
          i {
            order: 2;
            margin-left: 5px;
          }
          span {
            order: 1;
          }
        }
      }
    }
    .results-container {
      position: absolute;
      top: calc(100% + 15px);
      left: 0;
      right: 0;
      background: #FFF;
      padding: 20px;
      -webkit-box-shadow: 0px 4px 5px 2px rgba(0,0,0,0.10); 
      box-shadow: 0px 4px 5px 2px rgba(0,0,0,0.10);
      display: none;
      min-height: 70px;

      &.left {
        right: auto;
      }
      &.right {
        left: auto;
      }

      &.custom-height {
        .results {
          max-height: none;
        }
      }

      .results {
        max-height: 400px;
        overflow-y: auto;
        overflow-x: hidden;
        .inner {
          transition: all 0.3s ease;
          transition-delay: 0.1s;
          padding-bottom: 50px;
          background-image: url('images/preloader.svg');
          background-size: 50px 50px;
          background-position: 50% calc(100% + 50px);
          background-repeat: no-repeat;
          &.loading{
            background-position: 50% 100%;
          }
          &.done{
            background-position: 50% 100%;
            background-image: url('images/done.svg');
          }
          a.item{
            display: block;
            transition: opacity 0.2s ease;
            position: relative;
            width: 100%;

            &:focus{
              &:after {
                content: "";
                width: 100%;
                height: 100%;
                position: absolute;
                background: rgba(0,0,0,0.05);
                top: 0;
                left: 0;
              }
            }
          }
        }
      }
      .post-types {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;

        .more {
          margin-right: 20px;
        }

        b {
          font-size: 16px;
          font-weight: bold;
          margin-right: 20px;
        }
        a {
          font-size: 16px;
          & + a {
            margin-left: 10px;
          }
        }
      }
      .searching {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #202020;
        font-size: 14px;
        opacity: 0;
        transition: opacity 300ms ease;
        pointer-events: none;
        text-transform: uppercase;
        font-weight: bold;
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);

        &.show {
          opacity: 1;
        }

        .preloader{
          width: 50px;
          height: 50px;

          path {
            fill: var(--e-global-color-primary) !important;
          }
        }

      }
    }

    &.takeover-mobile-yes {
      @media (max-width: 768px) {
        .results-container {
          position: relative;
          width: 100vw;
        }
      }
    }

    &.no-submit {
      .post-types {
        display: none !important;
      }
    }

  }
  .backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0);
    z-index: 1;
    display: none;
  }
}

@keyframes placeHolderSwept {
  0% {
    background-position: -700px 0
  }
  100% {
    background-position: 700px 0
  }
}