.bd-search {
  position: relative;
  width: 100%;

  &::after {
    position: absolute;
    top: .4rem;
    right: .4rem;
    bottom: .4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: .3125rem;
    padding-left: .3125rem;
    @include font-size(.75rem);
    color: rgba($white, .65);
    // content: "⌘K";
    content: attr(data-shortcut);
    background-color: rgba($white, .1);
    @include border-radius(.125rem);
  }

  @include media-breakpoint-up(lg) {
    position: absolute;
    top: .75rem;
    left: 50%;
    width: 200px;
    margin-left: -100px;
  }

  @include media-breakpoint-up(xl) {
    width: 280px;
    margin-left: -140px;
  }

  .form-control {
    padding-right: 2.75rem;
    color: $white;
    background-color: rgba($black, .1);
    border-color: rgba($white, .4);
    transition-property: background-color, border-color, box-shadow;

    &::placeholder {
      color: rgba($white, .65);
    }

    &::-webkit-search-cancel-button {
      appearance: none;
      width: 1rem;
      height: 1rem;
      cursor: pointer;
      background: escape-svg($search-clear-icon) no-repeat 0 0;
      background-size: 100% 100%;
    }

    &:focus {
      background-color: rgba($black, .25);
      border-color: rgba($bd-accent, 1);
      box-shadow: 0 0 0 .25rem rgba($bd-accent, .4);
    }
  }
}