.search {
  &--toggle {
    display: none;
    padding: 15px 0 0 0;
  }
  &__label {
    visibility: hidden;
    display: none;
  }
  &__form {
    position: relative;
    padding: 0 5px;
    @media screen and (min-width: 320px) {
      padding: 0 15px;
    }
    input[type="text"]:focus {
      background-color: $light-grayish-blue;
      outline: 1px solid $super-light-blue;
      box-shadow: 0 0 0 1px $super-light-blue;
    }
  }

  &-results {
    .base-teaser__title--highlight,
    .carousel-teaser__title--highlight,
    .highlight-description {
      em {
        font-weight: bold;
        font-style: italic;
      }
    }
  }

  &-bar {
    position: relative;
    margin: 0;
    padding: 0 10px;
    input[type="text"] {
      @include font($baton-regular);
      color: $springster-purple;
      font-size: 20px;
      padding: 10px 5px 10px;
      width: 100%;
      border: 2px solid $springster-purple;
      box-sizing: border-box;
      &:focus {
        border: 2px solid $gunmetal;
        outline: 0;
      }
    }
    &--footer {margin: 0 8px;}
    &--results-page {margin: 30px 16px;}
  }
}

#search-toggle__button  {
  visibility: hidden;
  position: absolute;
  &:not(checked) ~ .search {
      display: none;
  }
  &:checked ~ .search {
      display: block;
  }
}
