@use "../mixin";

.AppBar {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  grid-column: 2 / 3;
  justify-content: start;

  position: absolute;
  right: 0px;
  top: -64px;

  height: 64px;
  width: 100%;

  padding-inline: 8px;

  color: var(--md-sys-color-on-surface);

  background-color: var(--md-sys-color-surface);

  overflow: hidden;
  transition: var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
  z-index: 998;

  .action-area {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    height: 64px;
    width: 100%;

    .search-input {
      @include mixin.typescale-style("title-medium");

      flex-grow: 1;

      height: 52px;
      min-width: 0px;

      margin-inline-end: 50px;
      padding-block: 0px;
      padding-inline: 24px;

      color: var(--md-sys-color-on-surface-variant);
      text-overflow: ellipsis;

      border: none;
      border-radius: var(--md-sys-shape-corner-full);

      background-color: var(--md-sys-color-surface-container);

      transition: margin var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
      z-index: 1;
    }

    .author-avatar {
      display: flex;
      align-content: center;
      flex-direction: column;
      flex-shrink: 0;
      flex-wrap: wrap;
      justify-content: center;

      position: absolute;
      right: 0px;

      height: 42px;
      width: 42px;

      overflow: hidden;
      z-index: 0;

      img {
        height: 42px;
        width: 42px;

        object-fit: cover;
        mask: var(--via-svg-mask) no-repeat 0 / 100%;
      }
    }
  }

  .result-area {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 24px;

    position: absolute;
    top: 76px;

    height: calc(100% - 76px);
    width: 100%;

    padding-block-start: 24px;
    padding-inline: 12px;

    overflow: scroll;

    .result-items {
      padding-inline: 12px;
      padding-block: 12px;

      width: 100%;

      text-decoration: none;

      border-radius: var(--md-sys-shape-corner-medium);

      .title {
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;

        h3 {
          color: var(--md-sys-color-on-surface);
        }

        .chips {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          gap: 4px;

          .segments {
            display: flex;
            align-items: center;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 4px;

            .item,
            &.item {
              padding-inline: 8px;

              border-radius: var(--md-sys-shape-corner-medium);
            }

            &::before {
              @include mixin.material-symbols($size: 16);
            }

            &.date {
              color: var(--md-sys-color-on-tertiary-container);

              background-color: var(--md-sys-color-tertiary-container);

              &::before {
                content: "calendar_today";
              }
            }

            &.categories {
              .item {
                color: var(--md-sys-color-on-purple-container);

                background-color: var(--md-sys-color-purple-container);
              }

              &::before {
                content: "category";
              }
            }

            &.tags {
              .item {
                color: var(--md-sys-color-on-yellow-container);

                background-color: var(--md-sys-color-yellow-container);
              }

              &::before {
                content: "tag";
              }
            }
          }
        }
      }

      .description {
        margin-block-end: 12px;
      }

      &:focus-visible {
        @include mixin.focus-ring($thickness: 2, $offset: 4);
      }
    }
  }

  .no-results {
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 42px;
    justify-content: center;

    height: calc(100% - 76px);
    width: 100%;

    user-select: none;
    -moz-user-select: none;

    .icon {
      @include mixin.material-symbols($size: 100);
    }
  }

  &.searching {
    top: 0px;

    height: 100%;

    padding: 12px;

    .action-area {
      .search-input {
        margin-inline-end: 0px;

        transition: margin var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
      }

      .author-avatar {
        opacity: 0;
        transition: opacity var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
      }
    }
  }

  &.scroll {
    background-color: var(--md-sys-color-surface-container);

    .search-input {
      background-color: var(--md-sys-color-surface-container-highest);
    }
  }

  &.hidden {
    top: -64px;
  }
}

@media screen and (max-width: 840px) {
  .AppBar {
    top: 0;

    width: 100%;

    opacity: 1;
    visibility: visible;

    .result-area {
      gap: 8px;
    }

    .no-results {
      height: calc(100% - (64px + 64px));
    }
  }
}
