quetre/views/sass/_components.scss

////////////////////////////////////////////////////////
//                     IMPORTS
////////////////////////////////////////////////////////
@use 'mixins' as *;

////////////////////////////////////////////////////////
//                   THEME CHANGER
////////////////////////////////////////////////////////
.theme-changer {
  border: none;
  // outline: none;
  background-color: transparent;
  cursor: pointer;
  position: relative;

  &__icon {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;

    transition: all 0.5s ease;
    transform-origin: center;

    // initial config
    &--sun {
      transform: scale(0) rotateZ(-180deg);
    }

    &--moon {
      transform: scale(1) rotateZ(0);
    }
  }
}
// changing config when root has the attr of theme
:root[theme='dark'] {
  .theme-changer__icon {
    &--sun {
      transform: scale(1) rotateZ(0);
    }

    &--moon {
      transform: scale(0) rotateZ(180deg);
    }
  }
}

////////////////////////////////////////////////////////
//                      ICONS
////////////////////////////////////////////////////////
.icon {
  max-height: var(--fs-500);
  max-width: var(--fs-500);
  height: 100%;
  width: 100%;
  fill: var(--clr-base-icon);

  &__down {
    height: var(--fs-350);
    width: var(--fs-350);
    opacity: 0.3;

    @include respond-to(bp-450) {
      height: var(--fs-250);
      width: var(--fs-250);
    }
  }
}

////////////////////////////////////////////////////////
//                     HEADINGS
////////////////////////////////////////////////////////
.heading {
  color: var(--clr-base-heading);
  font-weight: 600;

  &__primary {
    font-size: var(--fs-300);

    @include respond-to(bp-550) {
      font-size: var(--fs-270);
    }
  }
}

////////////////////////////////////////////////////////
//                  HELPER CLASSES
////////////////////////////////////////////////////////
.visually-hidden {
  clip: rect(1px, 1px, 1px, 1px) !important;
  border: 0 !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

////////////////////////////////////////////////////////
//                     LINKS
////////////////////////////////////////////////////////
.link {
  @include format-link(var(--clr-base-link), var(--clr-base-link-alt-alpha));
}

.skip-link {
  position: absolute;
  left: 50%;
  // background: var(--clr-base-bg);
  color: var(--clr-base-heading);
  text-decoration: none;
  text-align: center;
  font-weight: 500;
  padding: 0 var(--space-100);
  border-radius: 0 0 5px 5px;
  font-size: var(--fs-180);
  transform: translate(-50%, -150%);

  transition: transform 200ms ease;

  &:is(:focus, :focus-visible) {
    transform: translate(-50%, 0);
  }
}

////////////////////////////////////////////////////////
//                     METADATA
////////////////////////////////////////////////////////
.metadata-primary {
  display: grid;
  gap: 0 var(--space-100);
  grid-template-columns: auto 1fr;
  grid-template-rows: repeat(2, min-content);
  font-size: var(--fs-160);

  &__heading {
    grid-column: 2 / -1;
    align-self: end;
    color: var(--clr-base-heading-alt-alpha);
    font-weight: 600;

    // for verified icon
    display: flex;
    gap: var(--space-050);
    justify-items: start;

    // for name linking to profile
    a {
      font-size: 1.05em;
      color: currentColor;
    }
  }

  &__misc {
    grid-column: 2 / -1;
    align-self: start;
  }

  &__image {
    grid-row: 1 / -1;
    grid-column: 1 / span 1;
    margin-block: auto;
    max-height: var(--img-dim, --fs-600);
    max-width: var(--img-dim, --fs-600);
    // min-height: 100%;
    // min-width: 100%;
    object-fit: cover;

    clip-path: circle(50% at 50% 50%);
  }

  &__icon {
    grid-column: 1 / span 1;
    justify-self: end;
    align-self: center;

    height: 1.3em;
    width: 1.3em;
    fill: var(--clr-base-icon);
    flex: 0 0 auto;
  }
}

.metadata-secondary {
  justify-self: start;

  display: flex;
  gap: var(--space-200);
  align-items: center;
  flex-wrap: wrap;

  &__item {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0 var(--space-050);
  }

  &__icon {
    grid-column: 1 / span 1;
    justify-self: end;
    align-self: center;

    height: 1.3em;
    width: 1.3em;
    fill: var(--clr-base-icon);
  }

  &__data {
    grid-column: -2 / -1;
    justify-self: start;
  }

  &__text {
    grid-row: 2 / span 1;
    grid-column: 1 / -1;
    justify-self: center;

    font-size: 0.9em;
    color: var(--clr-base-text-alt-alpha);
  }
}

////////////////////////////////////////////////////////
//                     ANSWER
////////////////////////////////////////////////////////
.answer {
  --img-dim: var(--fs-600);

  display: grid;
  gap: var(--space-200);

  // question area
  &__question {
    font-size: 1.05em;
  }

  &__unviewable {
    // for aligning both text and svg
    display: grid;
    align-content: center;
    justify-content: start;
    grid-auto-flow: column;
    gap: var(--space-100);
    align-items: center;

    margin-top: var(--space-200);
    color: var(--clr-base-heading-alt-alpha);
    font-weight: 500;
    // border: 1px solid var(--clr-base-icon-alt-alpha);
    // padding: var(--space-100);
  }

  &__icon {
    height: 1.3em;
    width: 1.3em;
  }
}

////////////////////////////////////////////////////////
//                       FAQs
////////////////////////////////////////////////////////
.faqs {
  display: grid;
  gap: var(--space-800);
  justify-items: center;

  &__heading {
    justify-self: center;
  }

  &__list {
    justify-self: strech;
    display: grid;
    gap: var(--space-500);
    width: 100%;
    // text-align: center;

    @include respond-to(bp-750) {
      gap: var(--space-200);
    }
  }

  &__faq {
    border: 1px solid var(--clr-base-icon-alt-alpha);
    padding: var(--space-100);
  }

  &__question {
    padding: var(--space-100);
    display: flex;
    gap: var(--space-100);
    justify-content: space-between;
    align-items: center;

    color: var(--clr-base-heading-alt-alpha);
    font-weight: 500;
    font-size: var(--fs-180);
    list-style-type: none;

    cursor: pointer;

    // for hinding triangle on webkit
     &::-webkit-details-marker {
      display: none;
    }
  }
  &__icon {
    height: 1em;
    width: 1em;
    fill: var(--clr-base-icon);
    transition: all 200ms;
  }

  &__faq[open] {
    border: 1px solid var(--clr-base-icon);
  }

  &__faq[open] &__question &__icon {
    transform: rotateX(180deg);
  }

  &__answer {
    padding: var(--space-100);
  }

  &__faq[open] &__answer {
    animation: slide 200ms ease;
  }

  @include respond-to(bp-900) {
    gap: var(--space-500);
  }
  @include respond-to(bp-750) {
    gap: var(--space-200);
  }
}

////////////////////////////////////////////////////////
//               ABOUT PAGE COMPONENTS
////////////////////////////////////////////////////////
.features {
  display: grid;
  gap: var(--space-800);

  &__heading {
    justify-self: center;
  }

  &__list {
    display: grid;
    gap: var(--space-800);
    grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));

    @include respond-to(bp-900) {
      gap: var(--space-500);
      grid-template-columns: auto;
    }
  }

  &__feature {
    display: grid;
    gap: var(--space-100);
    grid-template-rows: repeat(3, min-content);
    font-size: var(--fs-160);
    // justify-items: center;
    // text-align: center;
  }

  &__feature-icon {
    fill: var(--clr-base-icon);
    grid-row: 1 / 2;

    height: 3em;
    width: 3em;

    @include respond-to(bp-750) {
      height: 2em;
      width: 2em;
    }
  }

  &__feature-heading {
    grid-row: 2 / 3;
    font-size: 1.3em;
  }
  &__feature-text {
    grid-row: 3 / 4;
  }

  @include respond-to(bp-900) {
    gap: var(--space-500);
  }
  @include respond-to(bp-750) {
    gap: var(--space-200);
  }
}

////////////////////////////////////////////////////////
//                ANSWER PAGE COMPONENTS
////////////////////////////////////////////////////////
.answers-box {
  display: grid;
  gap: var(--space-200);

  &__list {
    display: grid;
    gap: var(--space-800);
  }
}

.topics {
  display: grid;
  gap: var(--space-200);

  &__list {
    list-style: none;
    display: grid;
    gap: var(--space-100);
  }

  &__item {
    font-weight: 500;
  }
}

.related {
  display: grid;
  align-content: start;
  gap: var(--space-200);

  &__questions {
    list-style: none;
    display: grid;
    gap: var(--space-100);
  }

  &__question-item {
    font-weight: 500;
  }

  &__question-link[href^="/unanswered/"]::before {
    content: '[Unanswered] ';
    color: var(--clr-base-text-alt-alpha);
  }
}

////////////////////////////////////////////////////////
//                TOPIC PAGE COMPONENTS
////////////////////////////////////////////////////////
.topic-stats {
  --img-dim: var(--fs-1000);

  display: grid;
  gap: var(--space-200);
}

.famous-authors,
.related-topics {
  --img-dim: var(--fs-600);

  display: grid;
  gap: var(--space-300);

  &__list {
    display: grid;
    gap: var(--space-400);
  }

  &__item {
    display: grid;
    gap: var(--space-100);
  }
}

////////////////////////////////////////////////////////
//               PROFILE PAGE COMPONENTS
////////////////////////////////////////////////////////
.profile-meta {
  --img-dim: var(--fs-1000);

  display: grid;
  gap: var(--space-300);

  &__basic,
  &__description {
    display: grid;
    gap: var(--space-100);
  }

  &__icon {
    height: 1em;
    width: 1em;
  }
}

.profile-highlights,
.profile-credentials {
  display: grid;
  gap: var(--space-200);

  &__item {
    display: flex;
    gap: var(--space-050);
  }

  &__list {
    display: grid;
    gap: var(--space-100);
  }
}

.profile-spaces,
.profile-topics {
  --img-dim: var(--fs-500);

  display: grid;
  gap: var(--space-200);

  &__list {
    display: grid;
    gap: var(--space-200);
  }
}
.profile-feed {
  --img-dim: var(--fs-600);

  display: grid;
  gap: var(--space-200);

  &__container {
    display: grid;
    gap: var(--space-800);
  }
}