// Toolbar Searchfields
//================================================== */

$toolbarsearchfield-max-width: 225px;
$toolbarsearchfield-filled-out-width: 100px;
$toolbarsearchfield-empty-width: 34px;

$toolbarsearchfield-category-empty-width: 51px;

.toolbar-searchfield-wrapper {
  box-shadow: none;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 0;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
  width: $toolbarsearchfield-empty-width;
  min-height: 38px;

  @media only screen and (max-width: $breakpoint-phone-to-tablet) {
    overflow: auto;
  }

  > * {
    vertical-align: middle;
  }

  .searchfield {
    @include antialiased();

    background-color: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    color: $searchfield-text-color;
    font-size: $ids-size-font-sm;
    font-weight: $ids-number-font-weight-bold;
    outline: 0;
    padding-left: 34px;
    padding-right: 0;
    text-overflow: ellipsis;
    width: 100%;

    &::-webkit-input-placeholder,
    &::-moz-placeholder,
    &:-ms-input-placeholder {
      color: $searchfield-placeholder-text-color;
      font-size: $ids-size-font-sm;
      font-weight: $ids-number-font-weight-bold;
    }
  }

  &.has-collapse-button {
    .searchfield {
      cursor: pointer;
      right: 0;
      position: absolute;
    }

    &:not(.non-collapsible) .searchfield {
      width: 0%;
    }

    svg.icon:not(.close) {
      position: absolute;
      left: calc(100% - 26px);
    }

    &.is-open {
      .searchfield {
        width: 100%;
        cursor: text;
      }

      svg.icon:not(.close) {
        left: 8px;
      }

      .collapse-button svg.icon:not(.close) {
        left: 9px;
        top: 12px !important;

        @media (min-width: $breakpoint-phone) {
          left: 8px;
        }
      }
    }
  }



  &:not(.is-open):not(.non-collapsible) {
    .searchfield {
      height: 38px;
    }
  }

  // To correctly size the toolbar searchfield when it's not open, account for
  // missing text height.  The padding values should equal to `1px` taller on each side
  // than the standard input field padding.  The "closed" state also shifts the visual
  // location of the text/icon to better align it with other toolbar buttons.
  &:not(.is-open) {
    .searchfield {
      padding-bottom: 7px;
      padding-top: 8px;
    }

    .icon:not(.close, .searchfield-category-button) {
      top: 0;

      &:not(.icon-dropdown) {
        height: 18px;
        width: 18px;
      }
    }
  }

  &.non-collapsible {
    .searchfield {
      padding-bottom: 6px !important;
      padding-top: 6px !important;
    }

    .collapse-button {
      & > svg {
        @media only screen and (max-width: $breakpoint-phone-to-tablet) {
          margin-bottom: 2px;
        }
      }
    }

    .icon.icon-dropdown {
      height: 18px;
      width: 18px;
    }

    .icon:not(.close) {
      color: $searchfield-icon-color;
      height: 18px;
      width: 18px;

      @media only screen and (max-width: $breakpoint-phone-to-tablet) {
        top: 12px;
      }
    }
  }

  &.has-go-button {
    &.has-categories.is-open {
      .searchfield {
        border-left: 1px solid $searchfield-toolbar-border-color;
      }
    }

    &:not(.is-open) {
      .go-button {
        display: none;
      }
    }

    .searchfield {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
      width: calc(100% - 39px);
    }

    .go-button {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
      right: 10px;
      height: 38px;
    }

    > .icon {
      &.close {
        right: 45px;
      }
    }
  }

  label {
    display: none;
  }

  .icon {
    color: $searchfield-icon-color;

    &.close {
      background-color: rgba($searchfield-bg-color, 0);
      color: rgba($searchfield-text-color, 0);
    }

    &:not(.close) {
      height: 18px;
      top: 0;
      transform: translateY(50%);
    }
  }

  .inline ~ .icon {
    top: 11px;
  }

  .btn {
    background-color: rgba(0, 0, 0, 0);
    border-radius: 2px 0 0 2px;

    &.searchfield-category-button {
      min-width: 43px;
      background-color: rgba($searchfield-bg-color, 1);

      svg.icon:not(.close) {
        position: initial;
      }
    }
  }

  .searchfield-category-button,
  .go-button {
    &:focus {
      &:not(.hide-focus) {
        box-shadow: none !important;
        color: $button-color-secondary-initial-font;

        &::after {
          border-radius: 0;
          bottom: 0;
          content: '';
          display: inline-block;
          left: 0;
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }
  }

  &.is-hovered {
    .searchfield {
      border-color: transparent;
      border-bottom-color: rgba($searchfield-border-color, 0);
    }

    .icon {
      color: $searchfield-icon-hover-color;
    }

    .btn,
    .collapse-button {
      border-bottom-color: rgba($searchfield-border-color, 0);
      border-color: transparent;
    }

    .searchfield-category-button {
      border-color: $input-color-initial-border;
    }

    .go-button {
      color: rgba($searchfield-text-color, 0.7);

      .icon {
        color: rgba($searchfield-text-color, 0.7);
      }
    }

    &.active,
    &.is-open {
      .btn,
      .collapse-btn {
        &:not(.searchfield-category-button) {
          border-bottom-color: rgba($searchfield-border-color, 1);
        }
      }
    }
  }

  &.has-categories.alternate {
    .searchfield-category-button {
      border: none;
      height: 38px;
      padding-right: 5px;
      background-color: transparent;
    }

    &.active.is-hovered {
      .searchfield-category-button {
        border: 1px solid $header-searchfield-input-border-hover-color;
        border-right: none;
      }

      .searchfield {
        border: 1px solid $header-searchfield-input-border-hover-color;
      }
    }

    &.has-focus {
      .btn:focus,
      .btn:active {
        .icon {
          color: $searchfield-text-color;
        }
      }
    }

    &.active {
      .searchfield,
      .searchfield-category-button {
        border: 1px solid $header-searchfield-input-border-color;
        background: $searchfield-alt-bg-color;

        &.is-open {
          .icon {
            color: $searchfield-text-color;
          }
        }
      }

      .searchfield-category-button {
        border-right: 0;
      }
    }

    &:not(.active) .btn.searchfield-category-button {
      border-radius: 8px;
    }
  }

  &.is-open {
    .searchfield,
    .btn {
      height: 38px;
    }

    &.has-categories.alternate {
      .searchfield-category-button {
        border: 1px solid $header-searchfield-input-border-color;
        padding: 0 8px;
        left: 2px;
      }

      .searchfield {
        border: 1px solid $header-searchfield-input-border-color;
      }

      &.is-hovered {
        .searchfield-category-button,
        .searchfield {
          border: 1px solid $header-searchfield-input-border-hover-color;
        }
      }
    }

    // Searchfield changes text style to match other input fields
    .searchfield {
      color: $searchfield-text-color;
      font-size: $ids-size-font-base;
      font-weight: $ids-number-font-weight-base;
      height: 38px;
      text-transform: none;

      &::-webkit-input-placeholder {
        color: $searchfield-placeholder-text-color;
        font-size: $ids-size-font-base;
        font-weight: $ids-number-font-weight-base;
        text-transform: none;
      }

      &::-moz-placeholder {
        color: $searchfield-placeholder-text-color;
        font-size: $ids-size-font-base;
        font-weight: $ids-number-font-weight-base;
        text-transform: none;
      }

      &:-ms-input-placeholder {
        color: $searchfield-placeholder-text-color;
        font-size: $ids-size-font-base;
        font-weight: $ids-number-font-weight-base;
        text-transform: none;
      }
    }

    .collapse-button .icon {
      transform: translateY(0);
    }

    .icon {
      color: $searchfield-icon-color;
    }

    &:not(.non-collapsible) {
      .searchfield {
        height: 38px; // Unable to use token here. need to use the soho height
      }
    }

    &.alternate {
      .searchfield,
      .btn {
        background-color: rgba($searchfield-alt-bg-color, 1);
      }

      .searchfield {
        &::-webkit-input-placeholder {
          color: $searchfield-lighter-placeholder-text-color;
        }

        &::-moz-placeholder {
          color: $searchfield-lighter-placeholder-text-color;
        }

        &:-ms-input-placeholder {
          color: $searchfield-lighter-placeholder-text-color;
        }
      }

      &.active.has-focus.is-hovered {
        .searchfield:focus {
          border: 1px solid $header-searchfield-input-border-hover-color;
        }
      }
    }
  }

  &.non-collapsible {
    &.has-focus.active .searchfield-category-button,
    .searchfield-category-button {
      background-color: $searchfield-toolbar-bg-color;
      border-color: $searchfield-toolbar-border-color;
    }
  }

  &.active {
    // During the animation "out", the text goes transparent
    .searchfield {
      background-color: $searchfield-toolbar-bg-color;
      border-bottom-color: rgba($searchfield-border-color, 1);
    }

    &:not(.is-open) .searchfield {
      background-color: transparent;
    }

    /* stylelint-disable */
    // Ignored due to out-of-order properties that need to be in this order for proper cascade.
    .btn {
      border-color: rgba($searchfield-bg-color, 1);
      border-bottom-color: rgba($searchfield-border-color, 1);
    }

    .collapse-button {
      border-color: transparent;

      &:focus {
        box-shadow: none;
        border-color: rgba($searchfield-toolbar-focus-color, 0.7);
      }
    }
    /* stylelint-enable */
  }

  &.has-focus {
    .searchfield {
      border-color: transparent;

      &:focus {
        border-color: $searchfield-toolbar-focus-color;
      }
    }

    &.active {
      .inline ~ .icon {
        top: 15px;
      }

      &.toolbar-searchfield-wrapper {
        &.has-categories:not(.alternate) {
          .searchfield {
            @media only screen and (max-width: $breakpoint-phone-to-tablet) {
              width: auto;
              border-color: $searchfield-toolbar-border-color;
            }
          }
        }

        &.has-categories:not(.alternate).has-focus .searchfield {
          border-color: $header-searchfield-input-border-color;
        }
      }

      .btn {
        border-color: transparent transparent rgba($searchfield-border-color, 1);

        &.searchfield-category-button {
          border-color: $input-color-initial-border;
        }
      }
    }
  }

  &.active {
    width: $toolbarsearchfield-filled-out-width - 10;

    &.has-collapse-button {
      &:not(.is-open) {
        transition: all 300ms;
        width: 34px;
      }
    }

    .icon {
      &.close {
        height: 16px;
        top: 11px;
      }
    }

    .btn-icon {
      .icon {
        &.close {
          top: -1px;
        }
      }
    }

    button.close {
      top: 7px;
    }

    &.has-custom-collapse-size {
      width: 0;
    }

    &.active {
      width: $toolbarsearchfield-max-width;
    }
  }

  &.has-categories {
    width: $toolbarsearchfield-category-empty-width;

    &:not(.is-open):not(.alternate) {
      .searchfield-category-button {
        border-color: transparent;
      }

      .icon.icon-dropdown {
        color: transparent;
      }
    }

    &.active {
      width: $toolbarsearchfield-max-width;
    }

    &.has-text {
      width: $toolbarsearchfield-filled-out-width;

      &.has-custom-collapse-size {
        width: 0;
      }

      &.active {
        width: $toolbarsearchfield-max-width;
      }
    }

    .searchfield {
      width: calc(100% - 39px);
    }

    &.show-category {
      .searchfield {
        padding-left: 8px;
      }
    }

    &.has-go-button {
      .searchfield {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        width: calc(100% - 85px);
      }

      &.has-text {
        .searchfield {
          width: calc(100% - 39px);
        }
      }

      .go-button {
        border: 1px solid $searchfield-toolbar-border-color;
        border-radius: 0;
        color: $searchfield-icon-color;
        position: relative;
        margin-left: 0;

        &:hover {
          background-color: $button-color-tertiary-hover-background-new;
          color: $button-color-tertiary-hover-text-new;
        }
      }
    }

    &.searchfield-wrapper.show-category {
      .searchfield {
        border-left: none;
      }
    }
  }

  &:not(.active) {
    .btn-icon.close,
    &:not(.is-hovered) .icon.close {
      display: none;
    }
  }
}

.azure07 .active input {
  background-color: rgba(29, 95, 138, 0.5) !important;  //08
  border-bottom-color: rgba(19, 77, 113, 0.7) !important;  //09
  color: $ids-color-palette-white;

  &::-webkit-input-placeholder {
    color: $ids-color-palette-white !important;
    opacity: 0.7;
  }

  &::-moz-placeholder {
    color: $ids-color-palette-white !important;
    opacity: 0.7;
  }

  &:-ms-input-placeholder {
    color: $ids-color-palette-white !important;
    opacity: 0.7;
  }
}

// Set positioning logic of the wrapper when it takes up the fullscreen
.toolbar > .toolbar-searchfield-wrapper {
  left: 0;
  position: absolute;
  right: 100%;
  top: 5px;
  width: calc(100% - 40px);
  z-index: 10;

  &.active {
    right: 0;
    width: calc(100% - 40px);
  }

  &.has-text {
    width: calc(100% - 40px);

    &.active {
      width: calc(100% - 40px);
    }
  }

  &.has-go-button {
    .searchfield {
      width: calc(100% - 39px);
    }
  }
}

// Inside of Listviews
.card-header,
.widget-header {
  .toolbar-searchfield-wrapper {
    .icon.close {
      background-color: rgba($searchfield-card-bg-color, 0);
      border-color: rgba($searchfield-card-border-color, 0);
    }

    &.is-open {
      .searchfield {
        background-color: rgba($searchfield-card-bg-color, 1);
        border-bottom-color: rgba($searchfield-card-border-color, 1);
      }

      .icon {
        color: $searchfield-card-bg-color;

        &.close {
          background-color: rgba($searchfield-card-bg-color, 1);
        }
      }
    }

    &:hover {
      input:not([disabled]):not(:focus) {
        + svg {
          color: $listview-toolbar-button-icon-hover-color;
        }
      }
    }
  }
}

.header,
.masthead {
  .toolbar-searchfield-wrapper {
    &.is-hovered {
      &:not(.active):not(.is-open) {
        .icon {
          color: $header-toolbar-searchfield-icon-color;
        }
      }
    }
  }

  .toolbar-searchfield-wrapper {
    :not(.collapse-button) .icon:not(.close) {
      color: $searchfield-header-icon-color;
    }

    .searchfield {
      background-color: rgba($searchfield-header-bg-color, 0);
      border-bottom-color: rgba($searchfield-header-border-color, 0);
      color: $searchfield-header-text-color;
    }

    &.non-collapsible.is-open {
      .searchfield {
        background-color: $searchfield-header-bg-color;
        color: $header-flex-toolbar-input-searchfield-color;
        height: 38px;
      }

      &:not(.has-category) {
        border-color: rgba($searchfield-header-border-color, 0.7);
      }
    }

    .go-button {
      background-color: $button-color-secondary-initial-background;
      border-color: $button-color-secondary-initial-background;
      color: $button-color-secondary-initial-font;

      .icon {
        color: $button-color-secondary-initial-font;
      }

      &:hover {
        background-color: $button-color-secondary-hover-background;
        border: 1px solid $button-color-secondary-hover-background;
      }

      &:active {
        background-color: $button-color-secondary-active-background;
        border: 1px solid $button-color-secondary-active-background;
      }

      &:focus {
        &:active {
          background-color: $button-color-secondary-active-background;
          box-shadow: none;
        }
      }

      &[disabled],
      &[disabled]:hover {
        background-color: $button-color-secondary-disabled-background;
        border: 1px solid $button-color-secondary-disabled-border;
        box-shadow: none;
        color: $button-color-secondary-disabled-font;
        cursor: default;
      }

      .ripple-effect {
        background: $ids-color-palette-slate-20;
      }
    }

    .searchfield-category-button,
    .go-button {
      &:focus {
        // border: 1px solid transparent;

        &:not(.hide-focus) {
          box-shadow: none;
          color: $button-color-secondary-initial-font;

          &::after {
            border-right: 1px solid $header-searchfield-input-border-color;
            border-radius: 0;
            bottom: 0;
            content: '';
            display: inline-block;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
          }
        }
      }
    }

    .searchfield-category-button {
      border-bottom-left-radius: 2px;
      border-top-left-radius: 2px;
      border-top: 0;
      border-bottom: 0;

      .category {
        color: $header-flex-toolbar-input-searchfield-color;
      }

      &.btn {
        background-color: $searchfield-header-bg-color;
        border-bottom-color: rgba($searchfield-header-border-color, 0.7);
        height: 38px;
        opacity: 1;
      }
    }

    &:hover {
      input:not([disabled]):not(:focus) {
        + svg {
          color: $searchfield-header-icon-color;
          opacity: 1;
        }
      }
    }

    &.is-open {
      .searchfield,
      .btn {
        background-color: $searchfield-header-bg-color;
        border-bottom-color: rgba($searchfield-header-border-color, 0.7);
        border-top-color: rgba($searchfield-header-border-color, 0.7);
        opacity: 1;
      }
    }

    &.active {
      .searchfield,
      .btn {
        background-color: $searchfield-header-bg-color;
        border-bottom-color: rgba($searchfield-header-border-color, 0.7);
        height: 38px;
      }

      .collapse-button,
      .btn {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
      }

      .searchfield:focus {
        border-color: rgba($input-color-focus-border, 1);
      }

      &.is-open {
        .searchfield,
        .btn {
          color: $header-flex-toolbar-input-searchfield-color;

          &::-webkit-input-placeholder {
            color: $searchfield-placeholder-text-color;
          }

          &::-moz-placeholder {
            color: $searchfield-placeholder-text-color;
          }

          &:-ms-input-placeholder {
            color: $searchfield-placeholder-text-color;
          }
        }
      }
    }

    &.is-open .icon.close {
      color: $searchfield-header-icon-color;
      transform: translateY(-50%);
      top: 50%;
    }
  }

  // Small adjustments for being the full-width toolbar searchfield
  .toolbar > .toolbar-searchfield-wrapper {
    .searchfield,
    .btn {
      // Don't be semi-transparent in this mode, since it sits over top of other things
      background-color: rgba($searchfield-header-bg-color, 1);
      border-bottom-color: rgba($searchfield-header-border-color, 1);
    }

    &.has-go-button {
      .icon.close {
        right: 35px;
      }
    }
  }
}

.header {
  .toolbar > .toolbar-searchfield-wrapper {
    left: 20px;
    top: 12px;
  }
}

.header {
  .toolbar {
    .toolbar-searchfield-wrapper {
      text-align: right;
    }
  }
}

// Help out firefox a bit
html.is-firefox {
  .toolbar-searchfield-wrapper {
    &.is-open,
    &.non-collapsible {
      .searchfield {
        padding-bottom: 6px;
        padding-top: 10px;
      }
    }
  }
}

// For non-collapsible searchfields: Only be non-collapsible on larger breakpoints.
@media (min-width: $breakpoint-phone-to-tablet) {
  .toolbar-searchfield-wrapper.non-collapsible {
    width: $toolbarsearchfield-max-width;

    // reset all the styling for the searchfield to correctly appear open.
    .searchfield {
      background-color: $searchfield-toolbar-bg-color;
      border: 1px solid $searchfield-toolbar-border-color;
      border-radius: 2px;
      color: $searchfield-text-color;
      font-size: $ids-size-font-base;
      font-weight: $ids-number-font-weight-base;
      height: 38px;
      text-transform: none;

      &::-webkit-input-placeholder {
        color: $searchfield-placeholder-text-color;
        font-size: $ids-size-font-base;
        font-weight: $ids-number-font-weight-base;
        text-transform: none;
      }

      &::-moz-placeholder {
        color: $searchfield-placeholder-text-color;
        font-size: $ids-size-font-base;
        font-weight: $ids-number-font-weight-base;
        text-transform: none;
      }

      &:-ms-input-placeholder {
        color: $searchfield-placeholder-text-color;
        font-size: $ids-size-font-base;
        font-weight: $ids-number-font-weight-base;
        text-transform: none;
      }
    }

    &.has-text {
      width: $toolbarsearchfield-max-width;

      &.has-custom-collapse-size {
        width: 0;
      }

      &.active {
        width: $toolbarsearchfield-max-width;
      }
    }

    &.is-open {
      .icon {
        color: $searchfield-icon-color;
      }
    }
  }

  .card-header,
  .widget-header {
    .toolbar-searchfield-wrapper.non-collapsible {
      // reset all the styling for the searchfield to correctly appear open.
      .searchfield {
        background-color: rgba($searchfield-card-bg-color, 1);
        border-bottom-color: rgba($searchfield-card-border-color, 1);
      }

      &.is-open {
        .icon {
          color: $listview-toolbar-button-icon-color;
        }
      }
    }
  }

  .header,
  .masthead,
  .module-tabs {
    .toolbar-searchfield-wrapper.non-collapsible {
      // reset all the styling for the searchfield to correctly appear open.
      .searchfield {
        background-color: $subheader-searchfield-context-bg;
        border-bottom-color: rgba($searchfield-header-border-color, 0.7);
        color: $header-flex-toolbar-input-searchfield-color;
        height: 38px;

        @include placeholderTextColor() {
          @include placeholder();
        }

          &::-webkit-input-placeholder {
          color: $searchfield-placeholder-text-color;
        }

        &::-moz-placeholder {
          color: $searchfield-placeholder-text-color;
        }

        &:-ms-input-placeholder {
          color: $searchfield-placeholder-text-color;
        }
      }
    }
  }
}

html[dir='rtl'] {
  .toolbar-searchfield-wrapper {
    &.has-text {
      &:not(.is-open) {
        .searchfield {
          padding-left: 0;
        }

        &:not(.has-categories) {
          .searchfield {
            padding-right: 34px;
          }
        }
      }
    }

    &.has-categories {
      .searchfield-category-button {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 2px;
        border-top-left-radius: 0;
        border-top-right-radius: 2px;
      }

      &.show-category {
        .searchfield {
          padding-left: 22px;
          padding-right: 5px;
        }
      }
    }

    &.has-go-button {
      .go-button {
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 0;
        border-top-left-radius: 2px;
        border-top-right-radius: 0;
      }

      .icon.close {
        left: 45px;
      }
    }

    .searchfield {
      border-color: transparent;
      padding-left: 0;
      padding-right: 34px;
    }

    .btn,
    .collapse-button {
      border-color: transparent;
    }

    &.has-focus {
      &.active {
        .btn,
        .collapse-button {
          border-color: transparent;
        }
      }
    }

    &.is-open {
      .searchfield {
        padding-left: 34px;
      }
    }
  }

  .header {
    .toolbar-searchfield-wrapper {
      text-align: left;

      &.active {
        .searchfield,
        .collapse-button,
        .btn {
          border-bottom-color: rgba($searchfield-header-border-color, 0.7);
        }

        .collapse-button,
        .btn {
          border-bottom-left-radius: 2px;
          border-bottom-right-radius: 0;
          border-top-left-radius: 2px;
          border-top-right-radius: 0;
        }
      }
    }
  }
}

@include respond-to(phone) {
  .toolbar-searchfield-wrapper {
    &:not(.is-open) {
      .searchfield.alternate {
        background-color: transparent !important;
      }
    }

    &.has-go-button {
      > .icon {
        &.close {
          color: $searchfield-header-icon-color;
          right: 45px;
        }
      }
    }
  }

  html[dir='rtl'] {
    .toolbar-searchfield-wrapper.has-go-button > .icon.close {
      left: 45px;
      right: auto;
    }
  }
}

@include respond-to(phonedown) {
  .toolbar-searchfield-wrapper {
    &.has-categories {
      &.show-category {
        .btn {
          padding-right: 5px;
        }
      }

      &.has-go-button {
        > .icon {
          &.close {
            right: 50px;
          }
        }

        .searchfield {
          padding-right: 40px;
        }
      }
    }
  }

  html[dir='rtl'] {
    .toolbar-searchfield-wrapper {
      &.has-categories {
        &.has-go-button {
          > .icon.close {
            left: 40px;
          }

          .go-button {
            right: 0;
          }
        }
      }
    }
  }
}

/**
 * dirty fix; fixes a quirk where on JS side sometimes there is no ".active" on
 * searchfield-wrapper
 * due to text field losing scope of some sort when triggering
 * X focus; can test case this at
 * /tabs-module/example-category-searchfield-go-button-home.html#maincontent
 */
.header > .toolbar > .buttonset > .toolbar-searchfield-wrapper.non-collapsible.has-go-button.has-categories {
  button.close:not(.is-empty) {
    height: auto;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    
    html[class*='theme-classic-'] & {
      @media (max-width: $breakpoint-phone-to-tablet){
        top: 45%;
      }
    }

    > .icon {
      margin-top: unset;
    }

    @media (min-width: $breakpoint-phone-to-tablet) {
      right: 45px;
    }

    @media (min-width: $breakpoint-tablet-reduced) {
      right: 48px;
    }

    svg.close {
      display: block;
      top: 0 !important;
    }
  }

  &:has(+ :not(button)) {
    @media (max-width: ($breakpoint-phone-to-tablet - 1)) {
      width: 100% !important;
    }
  }

  @media (max-width: ($breakpoint-phone-to-tablet - 1)) {
    right: auto;

    .searchfield {
      width: auto;
    }

    button.close:not(.is-empty) {
      right: 37px;
    }
  }

  @media (min-width: $breakpoint-phone) {
    &.has-go-button.has-text {
      .searchfield {
        width: 75px !important;
      }
    }
  }

  @media (min-width: $breakpoint-slim) {
    &.has-go-button.has-text {
      .searchfield {
        width: 100px !important;
      }
    }
  }

  @media (min-width: $breakpoint-big-phone) {
    &.has-go-button.has-text {
      .searchfield {
        width: auto !important;
      }
    }
  }
}

/**
 * there is no "new" theme file for toolbar, so placing hotfix here
 */
html[class*='theme-new-'] .header > .toolbar > .buttonset > .toolbar-searchfield-wrapper.non-collapsible.has-go-button.has-categories {
  button.close:not(.is-empty) svg.close {
    top: 1px !important;
  }
}

html[class*='theme-new-'] .header .toolbar .toolbar-searchfield-wrapper.has-categories.has-go-button .go-button {
  height: 38px;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

html[class*='theme-classic-'] .header .toolbar .toolbar-searchfield-wrapper.has-go-button.has-categories .searchfield {
  border: none;
}

html[class*='theme-classic-']:not([dir='rtl']) .toolbar-searchfield-wrapper .icon:not(.close) {
  position: absolute;
  left: 8px;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: none;
}

html[class*='theme-classic-']:not([dir='rtl']) .toolbar-searchfield-wrapper.is-open .icon:not(.close) {
  left: 8px !important;
  right: auto !important;
}



html[dir='rtl'] {
  &.is-mac {
    .toolbar-searchfield-wrapper.non-collapsible .searchfield {
      padding-top: 6px !important;
    }

    @media (min-width: $breakpoint-phone-to-tablet) {
      .toolbar-searchfield-wrapper.non-collapsible .icon:not(.close) {
        top: 10px;
      }
    }
  }

  @media (min-width: $breakpoint-phone-to-tablet) {
    .toolbar-searchfield-wrapper.non-collapsible .searchfield:not(:focus) {
      border: 1px solid $searchfield-toolbar-border-color;
    }
  }

  .searchfield-wrapper.non-collapsible.is-open > .icon:not(.close):not(.icon-error) {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
  }

  .searchfield-wrapper.active.has-close-icon-button.has-custom-button .searchfield,
  .searchfield-wrapper.has-close-icon-button.has-custom-button .searchfield {
    padding-right: 34px;
  }

  .searchfield-wrapper.active.has-close-icon-button.has-custom-button .searchfield {
    padding-left: 60px;
  }

  .flex-toolbar .toolbar-section .searchfield-wrapper.toolbar-searchfield-wrapper.has-close-icon-button .custom-button {
    right: calc(100% - 72px);
    top: 7px;

    @media (min-width: $breakpoint-phone-to-tablet) {
      right: 193px;
    }
  }

  .flex-toolbar .toolbar-section .searchfield-wrapper.toolbar-searchfield-wrapper.has-close-icon-button.active:not(.is-open) .custom-button {
    right: calc(100% - 10px);
  }

  .flex-toolbar .toolbar-section .searchfield-wrapper.toolbar-searchfield-wrapper.has-close-icon-button.has-text.active.has-close-icon-button .custom-button {
    right: calc(100% - 96px);

    @media (min-width: $breakpoint-phone-to-tablet) {
      right: calc(100% - 56px);
    }
  }
}