.search-box {
  background: $base-panel;
  box-shadow: $shadow3;
  display: flex;
  height: 64px;
  align-items: center;
  cursor: text;

  & > input {
    font-family: $body-font;
    @include font-size(2);
    padding: 16px;
    height: 64px;
    background: transparent;
    border: 0;
    flex: 1 0 auto;
    padding-left: 0;
    font-weight: bold;
    color: $base-head;

    &::placeholder {
      font-weight: normal;
      color: $base-mute;
    }
  }

  & > input:focus {
    outline: 0;
  }

  & > .prefix {
    @include font-size(0);
    display: block;
    color: rgba($base-mute, 0.5);
    font-weight: 400;
    user-select: none;
    line-height: 1.5em;
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba($base-body, 0.5);
    margin: 0 0 0 16px;
    box-shadow: 0 1px 1px rgba($base-mute, 0.25);
  }

  & > .sep {
    color: rgba($base-mute, 0.5);
    @include font-size(2);
    margin: 0 8px;
  }

  // Hide prefix in mobiel
  @media (max-width: 768px) {
    & > .prefix,
    & > .sep {
      display: none;
    }

    & > input {
      padding-left: 16px;
    }
  }

  // Icon
  &::before {
    @include ion-icon('md-search');
    font-size: 32px;
    color: $base-head;
    flex: 0 0 64px;
    width: 64px;
    line-height: 64px;
    text-align: center;
    order: 2;
  }
}

/*
 * Small
 */

.search-box.-small {
  & {
    height: 48px;
  }

  & > input {
    padding: 8px;
    height: 48px;
    padding-left: 0;
  }

  & > .prefix,
  & > .sep,
  & > input {
    @include font-size(1);
  }

  &::before {
    flex: 0 0 48px;
    width: 48px;
    line-height: 48px;
    font-size: 24px;
  }
}