$top-bar-height: 95px !default;
$search-min-width: 400px !default;

.gui-search {
  position: relative;
}

.gui-search__body {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  border: 1px solid $color-border-base;
  width: 100%;
  background: white;
  margin-top: $layout-spacing-base*0.5;
  border-radius: $layout-spacing-base*0.25;
  box-shadow: $shadow-base;
}

.gui-search-options {
  padding: $layout-spacing-base*0.5 + $layout-spacing-base*0.25;
  border-bottom:  1px solid $color-border-base;

  .gui-search-options__toggle {
    color: $neutral-base;
  }
}

.gui-search-list__heading {
  color: $neutral-base;
  margin: $layout-spacing-base*0.5 ($layout-spacing-base*0.5 + $layout-spacing-base*0.25);;
}

.gui-search__body.gui-display-results {
  display: block;
}

.gui-search-list {
  padding: $layout-spacing-base*0.5 0;
}

.gui-search-list + .gui-search-list {
  border-top: 1px solid $color-border-base;
}

.gui-search-item {
  padding: $layout-spacing-base*0.5 ($layout-spacing-base*0.5 + $layout-spacing-base*0.25);

  em {
    font-style: normal;
    color: $primary-purple;
  }

  &:hover,
  &:focus {
    outline: none;
    background: $neutral-lightest;
  }
}

.gui-search-item__title,
.gui-search-item__content {
  font-weight: 500;
}

.gui-search-item__subtext {
  color: $neutral-base;
  font-size: $typo-size-small;
}

.gui-search-item__content {
  font-style: italic;
}

.gui-search-list a, .gui-search-list a:hover {
  text-decoration: none;
}

.gui-search__input {
  transition: width cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s, background-color cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
  width: 40px;
  border-radius: $layout-spacing-base*0.25;
  margin-right: $layout-spacing-base*0.25;

  &--clear {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.0s linear, opacity 0.0s linear;
    padding-right: $layout-spacing-base*0.5;
  }

  &--input {
    display:none;
    flex: 1 0 auto;
    border: none;
    background-color: transparent;
    padding: $layout-spacing-base*0.5;

    &:focus {
      outline: none;
    }
  }

  &--start {
    visibility: visible;
    opacity: 1;
    padding: $layout-spacing-base*0.5;
    transition: visibility 0.1s cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s, opacity 0.1s cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
  }
}

.gui-top-bar__search-dropdown {
  .gui-search__body {
    max-height: calc(100vh - #{$top-bar-height});
    overflow-y: auto;
  }
}

.gui-search__input.gui-is-focus {
  width: $search-min-width;
  background-color: $neutral-lightest;
  display: flex;
  transition: width cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
  margin-right: 0;
  box-shadow: -25px 0 13px -5px #FFF;

  .gui-search__input--input {
    display: block;
  }

  .gui-search__input--clear {
    position: static;
    visibility: visible;
    opacity: 1;
    padding: $layout-spacing-base*0.5;
    transition: visibility 0.0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s, opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
  }

  .gui-search__input--start {
    visibility: hidden;
    opacity: 0;
    transition: visibility cubic-bezier(0.4, 0.0, 0.2, 1) 0s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
    position: absolute;
  }
}