@import "../../base";

@include govuk-exports("idsk/component/search-component") {
  .idsk-search-component {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;

    label {
      @include govuk-font($size: 19);
      position: absolute;
      padding-left: govuk-spacing(2);
      padding-top: govuk-spacing(2);
      cursor: text;
      color: govuk-colour("grey-1");

      @include mq($from: desktop) {
        padding-top: 8px;
      }

      &.idsk-intro-block-site-search-text-small {
        padding-top: 7px;
        margin-top: 1px;
        color: govuk-colour("black");
      }
    }
  }

  .idsk-search-component__input {
    @include govuk-font($size: 19);

    height: 40px;
    border: 1px solid govuk-colour("black");
    margin-right: -3px;
    font-style: normal;
    font-weight: normal;

    @include mq($from: desktop) {
      height: 40px;
    }

    &::-webkit-search-cancel-button {
      -webkit-appearance: none;
      background-color: govuk-colour("grey-1");
      -webkit-mask: idsk-image-url("header-web/search-input-close.svg") no-repeat center;
      mask: idsk-image-url("header-web/search-input-close.svg") no-repeat center;
      display: inline-block;
      -webkit-mask-size: contain;
      mask-size: contain;
      height: 17px;
      width: 17px;

      // TODO: state events will not works, because compilation
    }
  }

  .idsk-search-component__input:focus {
    border: 4px solid govuk-colour("black");
    z-index: 3;
    box-shadow: none;
    margin-right: 3px;
  }

  .idsk-search-component__button {
    width: 44px;
    height: 40px;
    margin-bottom: 0;

    background-color: govuk-colour("blue");
    box-shadow: none;

    &:hover {
      background: govuk-colour("dark-blue");
    }

    &:active {
      top: 0;
    }
  }

  .idsk-search-component__input--small {
    height: 40px;
  }

  .idsk-search-component__button--small {
    height: 40px;
    width: 40px;
    z-index: 2;

    svg {
      height: 18px;
      width: 18px;
    }
  }

  .idsk-search-component .idsk-search-component__label--small {
    padding-left: 7px;
    padding-top: 7px;
  }

  .idsk-search-component--small {
    height: 50px;
    padding-top: govuk-spacing(1);
  }
}