@use '../globals/typography' as *;
@use '../globals/variables' as *;

.block-views-exposed-filter-blocksearch-search {
  position: relative;
  margin: var(--2x-gutter) 0;
  @media #{$media-mobile} {
    margin: 0 var(--gutter);
  }
  .form-item {
    margin: 0;
  }
  form {
    max-width: 100%;
  }
  .form-type-textfield {
    width: 100%;
    input {
      width: 100%;
      border: solid 2px var(--text-primary);
      padding: 24px 0 24px 20px;
      border-radius: 40px;
      box-sizing: border-box;
    }
  }
  .form-actions {
    input {
      --size: 60px;
      position: absolute;
      right: 10px;
      top: 7px;
      width: var(--size);
      height: var(--size);
      background-image: url('/themes/custom/skrymten/assets/images/trfk-icons/search-button.svg');
      background-repeat: no-repeat;
      background-size: var(--size);
      background-color: inherit;
      border: none;
      text-indent: -100000px;
      @media #{$media-mobile} {

      }
    }
  }
}

//* {
//  border: solid 1px red;
//}
// overrides for when inserted into GB
.wp-block-drupalblock-views-exposed-filter-block-search-search {
  @media #{$media-mobile} {
    margin: 0;
  }
  .form-type-textfield {
    input {
      @media #{$media-desktop} {
        width: calc(var(--max-width) * .6);
      }
    }
  }
  .form-actions {
    input {
      background-image: url('/themes/custom/skrymten/assets/images/trfk-icons/search-button-yellow.svg');
      @media #{$media-desktop} {
        left: calc(60% - 70px);
      }
    }
  }
}

// Common search view mode
.node--view-mode-search-index {
  h2 {
    @include font-search-result-heading;
  }
  margin: var(--gutter) 0;
  border-bottom: solid 1px var(--text-primary);;
}