.lbcamden-search {
  display: flex;

  &__input {
    @extend .govuk-input;
    appearance: none;
    height: initial;
    border-right-width: 0;
    @include govuk-media-query($from: desktop) {
      min-height: 50px;
    }

    .lbcamden-search--alt & {
      border-color: lbcamden-colour("white");
    }

    &:focus {
      z-index: 2;
      border-width: 2px;
      border-color: lbcamden-colour("black");
      outline: 3px solid lbcamden-colour("govuk-focus-colour");
      box-shadow: inset 0 0 0 2px;
    }
  }

  &__btn {
    width: 45px;
    height: 45px;
    @include govuk-responsive-padding(2, "all");
    overflow: hidden;
    //transition: background-color .25s;
    border: none;
    outline: none;
    @include background-svg("<svg width='21' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M8.908 1.24C5.378 1.24 2.5 4.074 2.5 7.593c0 3.52 2.878 6.355 6.408 6.355a6.425 6.425 0 0 0 2.84-.656c.067.076.144.14.228.191l4.67 5.512a1 1 0 0 0 1.526-1.293l-4.747-5.602a6.306 6.306 0 0 0 1.89-4.507c0-3.519-2.878-6.355-6.407-6.355ZM4.5 7.593c0-2.396 1.964-4.355 4.408-4.355 2.443 0 4.407 1.96 4.407 4.355 0 2.396-1.964 4.355-4.407 4.355C6.464 11.95 4.5 9.99 4.5 7.594Z' fill='" + lbcamden-colour("white") + "'/></svg>");
    background-color: lbcamden-colour("govuk-brand1-1-colour");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    text-indent: -5000px;
    @include govuk-media-query($from: desktop) {
      min-width: 50px;
      min-height: 50px;
    }

    &:focus {
      &:not(:active) {
        @include background-svg("<svg width='21' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M8.908 1.24C5.378 1.24 2.5 4.074 2.5 7.593c0 3.52 2.878 6.355 6.408 6.355a6.425 6.425 0 0 0 2.84-.656c.067.076.144.14.228.191l4.67 5.512a1 1 0 0 0 1.526-1.293l-4.747-5.602a6.306 6.306 0 0 0 1.89-4.507c0-3.519-2.878-6.355-6.407-6.355ZM4.5 7.593c0-2.396 1.964-4.355 4.408-4.355 2.443 0 4.407 1.96 4.407 4.355 0 2.396-1.964 4.355-4.407 4.355C6.464 11.95 4.5 9.99 4.5 7.594Z' fill='" + lbcamden-colour("black") + "'/></svg>");
        z-index: 2;
        transition: none;
        border: 2px solid lbcamden-colour("black");
        outline: none;
        background-color: lbcamden-colour("govuk-focus-colour");
      }
    }

    .lbcamden-search--alt & {
      border: 2px solid lbcamden-colour("white");

      &:focus {
        border: none;
      }
    }

    &:hover {
      background-color: lbcamden-colour("govuk-brand-hover-colour");
      cursor: pointer;
    }

    &:active {
      border: 2px solid lbcamden-colour("black");
      @include background-svg("<svg width='21' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M8.908 1.24C5.378 1.24 2.5 4.074 2.5 7.593c0 3.52 2.878 6.355 6.408 6.355a6.425 6.425 0 0 0 2.84-.656c.067.076.144.14.228.191l4.67 5.512a1 1 0 0 0 1.526-1.293l-4.747-5.602a6.306 6.306 0 0 0 1.89-4.507c0-3.519-2.878-6.355-6.407-6.355ZM4.5 7.593c0-2.396 1.964-4.355 4.408-4.355 2.443 0 4.407 1.96 4.407 4.355 0 2.396-1.964 4.355-4.407 4.355C6.464 11.95 4.5 9.99 4.5 7.594Z' fill='" + lbcamden-colour("black") + "'/></svg>");
      background-color: lbcamden-colour("govuk-focus-colour");
    }
  }
}