@import "../../../settings/all";
@import "../../../tools/all";
@import "../../../helpers/all";
@import "../_partials/gradient-background";

$icon-search: url("../../../assets/images/icon-search-white.svg");

@include govuk-exports("govuk/sdn/component/searchbar") {
  // todo replace colors from global variables
  $from: #2e3ac7;
  $to: #448bef;
  $search-block-bg: govuk-colour("white");

  .sdn-searchbar-wrapper {
    background: linear-gradient(90deg, $from 0%, $to 100%);
  }

  .sdn-searchbar {
    padding-top: 15px;
    padding-bottom: 15px;

    @include govuk-media-query($from: tablet) {
      padding-top: 52px;
      padding-bottom: 35px;
    }
  }

  .sdn-searchbar__item {
    height: 50px;
    border-radius: 2px;
    background-color: $search-block-bg;
  }

  .sdn-searchbar-block {
    display: -ms-flexbox;
    display: flex;
    padding: 4px;
    -ms-flex-align: stretch;
        align-items: stretch;

    input[type="search"] {
      width: 100%;
      border: 0;

      &:focus {
        outline: 0;
      }
    }
  }

  .sdn-searchbar-block__item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;

    &:first-child {
      padding: 0 20px;
      -ms-flex-positive: 1;
          flex-grow: 1;
    }
  }

  .sdn-searchbar-block__item--stretched {
    -ms-flex-align: stretch;
        align-items: stretch;
  }

  .sdn-searchbar-button {
    @include govuk-media-query($until: tablet) {
      padding: 20px;
      background-image: $icon-search;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 50%;
    }
  }

  .sdn-searchbar-button--text {
    @include govuk-media-query($until: tablet) {
      display: none;
    }
  }
}