.search-page {
  --offset: 10px;
  min-height: 100vh;
}

.search-page__aside {
  --lightness: calc(100% - var(--is-dark-theme-on) * 80%);
  position: relative;
  overflow: auto;
}

.search-page__aside-inner {
  background-color: var(--color-background);
}

.search-page__aside-button {
  appearance: none;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  min-height: 108px;
  background-color: transparent;
  cursor: pointer;
}

.search-page__aside-icon-wrapper {
  --stroke-opacity: 0.3;
  --stroke-color: hsl(var(--color-base-text) / var(--stroke-opacity));
  visibility: visible;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  margin: auto;
  width: 48px;
  height: 48px;
  border: 1px solid var(--stroke-color);
  border-radius: 50%;
  color: var(--color-text);
  background-color: var(--color-background);
  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
}

.search-page__aside-icon {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(calc(var(--on) + var(--off) * 1.5));
  opacity: var(--on);
  width: 100%;
  height: 100%;
  transition: transform 0.5s, opacity 0.5s;
}

.search-page__aside-icon--close {
  --on: var(--is-filter-open);
  --off: calc(1 - var(--is-filter-open));
}

.search-page__aside-icon--filter {
  --on: calc(1 - var(--is-filter-open));
  --off: var(--is-filter-open);
}

.search-page__main {
  padding: var(--offset);
  max-width: 809px;
}

@media not all and (width >= 1024px) {
  .search-page {
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "main"
      "filter"
      "footer";
  }

  .search-page__aside {
    grid-area: filter;
    position: sticky;
    z-index: 1;
    bottom: 0;
    border-top: 1px solid;
  }

  .search-page__aside-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .search-page__main {
    grid-area: main;
    margin-inline: auto;
  }
}

@media not all and (width >= 768px) {
  .search-page__aside {
    position: fixed;
    --is-filter-open: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    border-top: 0;
    z-index: 3;
  }

  .search-page__aside::before {
    content: "";
    opacity: var(--is-filter-open);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: hsl(var(--color-fade) / 0.45);
    backdrop-filter: grayscale(1);
    transition: 0.5s;
    pointer-events: none;
  }

  .search-page__aside-inner {
    opacity: var(--is-filter-open);
    transform: translateY(calc((var(--is-filter-open) - 1) * 100%));
    flex: 0 1 auto;
    overflow: auto;
    align-items: flex-start;
    text-align: start;
    min-height: 0;
    max-height: calc(100vh - 108px);
    transition:
      transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1),
      opacity calc(0.5s * (var(--is-filter-open)));
      background-color: var(--color-background);
  }

  .search-page__aside-button {
    flex: 1 1 auto;
  }

  .search-page__aside--open {
    --is-filter-open: 1;
  }

  .search-page__aside:not(.search-page__aside--open) {
    visibility: hidden;
    transition-delay: 0.5s;
  }
}

@media (width >= 768px) {
  .search-page__aside-button {
    display: none;
  }
}

@media (width >= 1024px) {
  .search-page {
    --offset: 20px;
    display: grid;
    grid-template-columns: 320px 1fr 320px;
    grid-template-rows: auto 1fr;
  }

  .search-page__aside {
    position: sticky;
    top: calc(var(--header-height, 0) * 1px);
    height: calc(100vh - var(--header-height, 0) * 1px);
    grid-row-end: span 2;
    display: grid;
  }

  .search-page__aside-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .search-page__main {
    grid-column: 2/-1;
    justify-self: center;
  }
}

@media (width >= 1240px) {
  .search-page__main {
    grid-column: auto;
  }
}
