// =======================================
// Flexible Toolbar - Searchfield Component
// ==================================== //

$flex-toolbar-searchfield-focus-width: 225px;
$responsive-searchfield-filled-out-width: 34px;

.toolbar-section {
  &.search {
    padding: 4px 0;
  }

  .searchfield-wrapper {
    margin: 0 15px 0 0;

    &.has-focus {
      width: $flex-toolbar-searchfield-focus-width;
      height: 38px;
    }

    .collapse-button {
      display: none;
      height: 38px;
      margin: 0;
      min-width: 0;
      padding: 0;
      width: $responsive-searchfield-filled-out-width + 4;
    }
  }
}

.flex-toolbar {
  .toolbar-searchfield-wrapper {
    @media (max-width: $breakpoint-phone-to-tablet) {
      &:not(.is-open) {
        .searchfield-category-button {
          position: absolute;
          border-color: transparent;

          .icon-dropdown {
            visibility: hidden;
          }
        }
      }
    }

    .searchfield-category-button {
      svg.icon {
        transform: translateX(-5px);
      }
    }

    > svg.icon {
      top: 10px;
      width: 18px;
    }
  }
}

.flex-toolbar {
  .toolbar-searchfield-wrapper {
    &.has-collapse-button.is-open:not(.non-collapsible) {
      .icon:not(.close):not(.icon-error) {
        top: 50%;
      }
    }

    .btn-icon .icon.close {
      top: 0;
    }

    &.searchfield-wrapper > svg.icon:not(.icon-error) {
      top: 50%;
      transform: translateY(-50%);
    }

    &.has-collapse-button.has-close-icon-button.is-hovered:not(.is-open) {
      svg.close.icon {
        opacity: 0;
      }
    }
  }
}

// RTL Styles
html[dir='rtl'] {
  .toolbar-section {
    .searchfield-wrapper {
      margin: 0 0 0 5px;
    }
  }
}

// Special Case for a responsive, active searchfield.
// All toolbar sections except for the one containing the searchfield collapse,
// and the one containing the searchfield expands to fill the entire space.
@include respond-to(phone) {
  .flex-toolbar {
    &.searchfield-active {
      .toolbar-section {
        overflow: hidden;
        padding-left: 0;
        padding-right: 0;
        width: 0;

        &.search {
          width: 100%;
        }

        .searchfield-wrapper,
        .toolbar-searchfield-wrapper {
          width: 100%;
        }
      }
    }

    // TODO: Remove this once we don't need to support regular Toolbar anymore
    .searchfield-wrapper,
    .toolbar-searchfield-wrapper {
      &.has-text {
        width: 34px;
      }
    }

    .searchfield-wrapper {
      > .icon.close {
        right: 45px;
      }
    }
  }

  .toolbar-section {
    .searchfield-wrapper {
      &.is-open {
        .collapse-button {
          border-radius: 0;
          display: inline;
          margin-left: 3px;
        }

        &.has-collapse-button {
          .searchfield {
            padding-right: 40px;
            border-radius: 8px;
            width: calc(100% - 40px);
            position: inherit;
          }
        }
      }

      &:not(.is-open) {
        .searchfield + button.close {
          display: none;
        }
      }
    }
  }

  html[dir='rtl'] {
    .flex-toolbar {
      .searchfield-wrapper {
        > .icon.close {
          left: 40px;
          right: auto;
        }
      }
    }
  }

  html[class*='theme-classic-'] {
    .flex-toolbar.searchfield-active .toolbar-section {
      .searchfield-wrapper,
      .toolbar-searchfield-wrapper {
        &.is-open.has-collapse-button {
          &.has-go-button {
            width: calc(94% + 35px);

            .btn-icon.close {
              right: 53px;
            }
          }

          @media (max-width: $breakpoint-phablet) {
            width: calc(90% + 35px);
          }

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

          .collapse-button {
            background-color: transparent;

            .icon {
              @media (max-width: $breakpoint-slim) {
                left: 9px;
                top: 10px !important;
              }
            }
          }

          .btn-icon.close {
            right: 11%;

            @media (max-width: $breakpoint-slim) {
              right: 12%;
            }
          }
        }
      }
    }

    .flex-toolbar .searchfield-wrapper > .icon.close {
      right: 15%;

      @media (max-width: $breakpoint-phone-to-tablet) {
        right: 8%;
      }

      @media (max-width: $breakpoint-phablet) {
        right: 11%;
      }

      @media (max-width: $breakpoint-slim) {
        right: 16%;
      }
    }

    .header .flex-toolbar .toolbar-section {
      .searchfield-wrapper,
      .toolbar-searchfield-wrapper {
        &.is-open.has-collapse-button {
          width: calc(95% + 35px);

          @media (max-width: $breakpoint-phablet) {
            width: calc(89% + 35px);
          }
        }

        &:not(.is-open).has-collapse-button {
          left: 15px;
          top: 0;
        }
      }
    }
  }
}