TelegramPWA/src/components/middle/search/MiddleSearch.module.scss

@use "../../../styles/mixins";

.root {
  --color-reaction: var(--color-background-secondary);
  --hover-color-reaction: var(--color-background-secondary-accent);
  --text-color-reaction: var(--color-text-secondary);
  --color-reaction-chosen: var(--color-primary);
  --text-color-reaction-chosen: #FFFFFF;
  --hover-color-reaction-chosen: var(--color-primary-shade);

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-local-search);

  @media (min-width: 1276px) {
    :global(#Main.right-column-open) & {
      width: calc(100% - var(--right-column-width));
    }
  }
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.5rem;
  background-color: var(--color-background);
  display: flex;
  align-items: center;
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(0.875rem, env(safe-area-inset-right));

  pointer-events: auto;

  opacity: 0;
  transition: opacity 200ms ease-in-out;

  .active & {
    opacity: 1;
  }

  @media (max-width: 600px) {
    padding-left: max(0.5rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
  }

  :global(body.is-electron.is-macos) & {
    padding-left: 4.5rem;
  }
}

// Same as in MiddleHeader.scss
.avatar {
  width: 2.5rem !important;
  height: 2.5rem !important;
  margin-right: 0.625rem;
}

.input {
  border: none;
  margin-left: 0.25rem;
  margin-right: 0.75rem;
  flex: 1;

  transition-property: background-color, box-shadow, border-radius;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;

  .mobile & {
    margin: 0;
  }
}

.focused .input {
  box-shadow: 0 0 0.625rem 0 var(--color-default-shadow);
}

.withDropdown {
  background-color: var(--color-background);
  box-shadow: 0 0 0.625rem 0 var(--color-default-shadow);
}

.adaptSearchBorders {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dropdown {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  max-height: min(24rem, 80vh);
  pointer-events: all;

  display: flex;
  flex-direction: column;

  background-color: var(--color-background);

  overflow: hidden;
  box-shadow: 0 0 0.625rem 0 var(--color-default-shadow);
  clip-path: inset(0 -0.625rem -0.625rem -0.625rem); // Hide top shadow

  border-bottom-left-radius: 1.375rem;
  border-bottom-right-radius: 1.375rem;

  transition-behavior: allow-discrete;
  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
  transition-property: display, opacity;
  transition-duration: 200ms;

  .mobile & {
    position: absolute;
    top: 3.375rem; // Subpixel rendering can leave 1px gap otherwise
    right: 0;
    bottom: 3.375rem;
    left: 0;

    max-height: none;
    padding: 0;

    transform: none;
    border-radius: 0;
  }

  @starting-style {
    opacity: 0;
  }
}

.dropdownHidden {
  display: none;
  opacity: 0;
}

.results {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  padding: 0.5rem;

  @include mixins.adapt-padding-to-scrollbar(0.5rem);
}

.placeholder {
  color: var(--color-text-secondary);
  text-align: center;
  margin: 0.5rem;
}

.separator {
  margin-inline: 1rem;
  border-top: 1px solid var(--color-borders);
}

.savedTags {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;

  padding-block: 1rem;
  margin-inline: 1rem;

  border-bottom: 1px solid var(--color-borders);

  overflow-x: scroll;
}

.wrap {
  flex-wrap: wrap;
}

.searchTags {
  display: flex;
  gap: 0.125rem;
  align-items: center;
}

.savedSearchTag {
  margin-inline: 0.5rem;
}

.hash {
  margin-inline-end: -0.5rem;
  margin-inline-start: 0.5rem;

  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: var(--color-text-secondary);
}

.searchTypes {
  display: flex;
  flex-shrink: 0;

  padding-block: 1rem;
  margin-inline: 1rem;

  border-bottom: 1px solid var(--color-borders);

  overflow-x: scroll;
}

.searchType {
  --accent-color: var(--color-primary);

  flex-grow: 0 !important;
  flex-shrink: 0;

  color: var(--color-text-secondary);
  background-color: var(--color-item-active);
  font-weight: var(--font-weight-medium);

  margin-bottom: 0;
}

.selectedType {
  background-color: var(--color-primary);
  color: var(--color-white) !important;

  &:hover {
    background-color: var(--color-primary-shade);
  }
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3.5rem;
  background-color: var(--color-background);
  display: flex;
  align-items: center;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(0.5rem, env(safe-area-inset-right));

  pointer-events: auto;

  box-shadow: 0 -2px 2px var(--color-light-shadow);

  transform: translateY(100%);
  transition: transform 200ms ease-in-out;

  .active & {
    transform: translateY(0);
  }

  :global {
    body:not(.keyboard-visible) & {
      padding-bottom: 0;
      height: 3.5rem;
    }

    @media (max-width: 600px) {
      body:not(.keyboard-visible) & {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(3.5rem + env(safe-area-inset-bottom));
      }
    }
  }
}

.counter {
  flex: 1;
  color: var(--color-text-secondary);
}

.mobileNavigation {
  position: absolute;
  right: 0.5rem;
  bottom: 4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.navigationButton {
  transition-property: background-color, color, filter;
}

.navigationDisabled {
  filter: brightness(0.9);
}

@keyframes jumpIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}