// ----------------------- //
// SEARCHBAR
//
#searchbar {

  transition: max-height .4s ease-in-out;
  max-height: 0;
  overflow: hidden;
  
  form {
    transition: opacity .4s ease;
    opacity: 0;

    @media (max-width: @screen-xs-max) {
      &.search-form {
        margin-top: 0;
      }
    }
  }

  &.show {
    max-height: 200px;
    form {
      opacity: 1 !important;
    }
  }

  background-color: @hwk-blue-light-25;

  & > div {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

// ----------------------- //
// SEARCH FORM
//
#searchbar, .content {

  .search-form {
    height: auto;
  }
  .search-bar {

    display: flex;

    .form-group {
      width: calc(100% - @input-height-base);
      margin: 0;
      @media (min-width: @screen-xl-min) {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }

    input {
      background-color: #fff;
      height: @input-height-base;
      width: 100%;
      margin: 0;
    }

    .btn {
      position: initial;
      width: @input-height-base;
      height: @input-height-base;
      border: none;
      background-color: @hwk-blue-dark;
      .glyphicon {
        color: white;
      }
    }
  }
}

.col .form-group,
.content .search-panel .form-group {
  label {
    left: 15px;
  }
}



// ----------------------- //
// SEARCH PAGE
//
.content {

  // search panel
  .search-panel {
    margin-bottom: 15px;
    // horizontal swipe
    .search-filter {
      margin-top: 10px;
      .swipe-horizontal-container {
        background-color: transparent;
      }
      .nav-tabs { // ul
        &, li, li a, li.active, li.active a, span {
          color: @hwk-blue-dark;
          border: none;
          background-color: transparent;
        }
        li.active a, 
        a:hover, a:focus {
          span {
            text-decoration: underline;
          }
        }          
      }
    }
    sup {
      font-size: 10px;
      color: @hwk-blue-light;
      &.search-result-number-circle {
        background-color: @hwk-blue-light;
        color: #fff;
        border-radius: 10px;
        padding: 0 5px;
      }
    }

    .search-advanced {
      margin-top: 10px;
      .search-dropdown-link {
        cursor: pointer;
      }
      .col {
        display: flex;
      }
      .dropdown {
        .dropdown-toggle {
          color: @hwk-blue-dark;
          &:active {
            box-shadow: none;
          }
        }
        .dropdown-menu {
          list-style: none;
          margin: 0;
          padding-top: 5px;
          padding-bottom: 5px;
          li {
            margin: 0;
            font-size: @font-size-small;
            &::before {
              display: none;
            }
            a {
              padding: 5px 15px;
              border: none;
              color: @hwk-blue-dark;
              &:active,
              &:focus,
              &:hover {
                color: @hwk-blue-dark;
                background-color: @hwk-blue-light-25;
              }
            }
          }
        }
      }
    }
  }

  .tab-pane {

    .map-container {
      @media (min-width: @screen-md-min) {
        width: calc(58.33333333% - 40px);
        left: 20px;
      }
      @media (min-width: @container-xl) {
        width: calc(58.33333333% - 80px);
        left: 40px;
      }
    }
  }
}

// search hit item
.searchhit-content,
.searchhit-content-map {
  .searchhit-header {
    margin-bottom: 20px;
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
      margin-bottom: 3px;
    }
  }
}