@use 'apps/dashboard/src/variables' as *;

.search-page {
  $spacing: rhythm(4);

  display: flex;

  .search-preview-container {
    display: flex;
    flex-direction: column;
    gap: $spacing;
    height: calc(100vh - var(--app-topbar-height));
    overflow-y: auto;
    width: 100%;
    transition: width $transition-slide;

    .preview-content {
      display: flex;
      flex-direction: column;
      gap: $spacing;
    }

    &.panel-open {
      width: calc(100% - var(--panel-width));
    }
  }

  .toggle-panel-button {
    position: fixed;
    right: 0;
    top: calc(var(--app-topbar-height) + #{rhythm(2)});
    transition: transform $transition-response;
    transform: translateX(#{rhythm(5)});

    &.visible {
      transition: transform $transition-response $transition-slide-duration;
      transform: translateX(0);
    }

    > button {
      border-radius: $border-radius-default 0 0 $border-radius-default;
    }
  }

  .search-configuration-container {
    background-color: $color-light-stronger;
    height: calc(100vh - var(--app-topbar-height));
    overflow-y: auto;
    padding: var(--app-layout-padding-top) var(--app-layout-padding-right) var(--app-layout-padding-bottom);
    position: absolute;
    right: 0;
    transition: transform $transition-slide;
    /* Add 2px to the panel width for the resizer space */
    width: calc(var(--panel-width) + #{rhythm(0.25)});

    &.collapsed {
      transform: translateX(var(--panel-width));
    }

    .close-button {
      display: block;
      position: absolute;
      right: var(--app-layout-padding-right);
      top: rhythm(2);
    }

    /* Resizer area is 2px each side of the border to make it easily clickable */
    .resizer {
      cursor: col-resize;
      height: 100%;
      left: 0;
      position: absolute;
      top: var(--panel-top, 0);
      width: calc(#{rhythm(0.5)} + 1px);

      .border {
        background: $color-neutral-light;
        height: 100%;
        left: rhythm(0.25);
        position: relative;
        width: 1px;
      }
    }
  }
}
