#SearchContainer, #CollectionContainer {
  .search-toolbar {
    display: flex;
    align-items: center;
    padding: var(--spacing-s) var(--spacing-sm);
    justify-content: space-between;
    background: var(--color-neutral-5);
    border-radius: var(--spacing-xs);
    gap: var(--spacing-s);

    .search-toolbar__info {
      display: flex;
      align-items: center;
      gap: var(--spacing-s);
      border: none;
      margin: 0;
      padding: 0;
      flex-grow: 1;
    }

    .search-toolbar__icon {
      display: flex;
    }

    .search-toolbar__wrapper {
      display: flex;
      align-items: center;
      gap: var(--spacing-s);
      flex-direction: row;
      flex-grow: 1;
    }

    .search-toolbar__subtext {
      color: var(--color-neutral-70);

      & .mobile-only {
        cursor: pointer;
      }
    }

    .search-toolbar__subtext-link {
      color: rgb(var(--color-subtext));
      text-decoration: underline;
    }

    .search-toolbar__button {
      height: auto;
    }

    @media (max-width: 767px) {
      .desktop-only {
        display: none !important;
      }

      .mobile-only {
        display: unset;
      }

      .search-toolbar__icon .icon {
        --icon-size: 2rem;

        & path {
          stroke-width: 0.15rem;
        }
      }

      .search-toolbar__subtext {
        display: flex;
        align-items: center;
        gap: var(--spacing-s);
      }

      .search-toolbar__subtext-link span {
        display: flex;

        & path {
          stroke-width: 0.15rem;
        }
      } 
    }
    
    @media (min-width: 768px) {
      height: auto;
      gap: var(--spacing-sm);
      padding: var(--spacing-sm);

      .mobile-only {
        display: none !important;
      }

      .search-toolbar__info {
        gap: var(--spacing-sm);
      }

      .search-toolbar__wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
      }

      .search-toolbar__subtext-link {
        margin-left: var(--spacing-xxs);
      }
    }

    .search-toolbar__button {
      color: #000;
      border: none;
      font-size: 1.6rem;
      font-weight: 500;
      cursor: pointer;
      padding: 0;
      text-decoration: underline;
      text-underline-offset: 5px;
      font-family: var(--font-heading-family);
    }
  }

  /*Switch slider*/
  .search-toolbar .switch-slider {
    width: 4.9rem;
    height: 2.6rem;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color .3s;

    &::before {
      top: .3rem;
      inset-inline-start: 0.3rem;
      width: 2rem;
      height: 2rem;
    }

    &.is-active {
      background-color: var(--color-red);
    }

    &.is-active::before {
      transform: translateX(2.3rem);
    }
  }

  /*overriding FYS tool styling*/
  bike-sizing-tool:not(.hidden) {
    display: flex;
    align-items: stretch;

    & .container {
      flex: 1;
      display: flex;
      align-items: stretch;
    }

    & .twp-sizing-tool {
      margin: 0;
      flex-grow: 1;
    }
  }

  /*Loading, show same height*/
  .search-toolbar.loading-animation {
    height: 5rem;

    @media (min-width: 768px) {
      height: 8rem;
    }
  }
}

.search-toolbar__outer-container {
  display: flex;
  flex-direction: column;
  margin: none;
  gap: var(--spacing-xxs-plus);
  padding-bottom: var(--spacing-lg);
  
  @media (min-width: 768px) {
    flex-direction: row;
    align-items: stretch;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-xl);

    & > * {
      flex-grow: 1;
      flex-basis: calc(50% - var(--spacing-md) / 2);
    }
  }
}