.c-toggle-search-button {
  &__button {
    background: $brand-grey--lighter;
    border-radius: $border-radius;
    border: 0;
    color: $brand-color;
    margin-right: $spacing--medium;
    padding: $spacing--small/2 $spacing--small;
    display: flex;
    align-items: center;

    .c-icon {
      height: 18px;
      width: 18px;

      @include mq(desktop) {
        height: 24px;
        width: 24px;
      }
    }

    @include font-size(16px, 22px);

    @include mq(desktop) {
      @include font-size(18px, 32px);
      padding: $spacing--small $spacing;
    }

    &:hover,
    &:focus,
    &:active {
      border: 0;
    }

    &--wide {
      display: none;
      @include mq(desktop) {
        display: flex;
        box-shadow: none;
      }
    }
  }

  &__button-text {
    margin-right: $spacing;
  }
}