@import 'https://unpkg.com/open-props' layer(design.system);
/* Source code of these utilities: https://github.com/mobalti/layout-craft/blob/main/lib/utilities.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200..700&display=swap');
@import 'https://www.unpkg.com/layout-craft@1.0.1/dist/utilities.css'
  layer(base.utilities);

@layer base.app {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  :where(:not(dialog)) {
    margin: 0;
    padding: 0;
  }
  
  :root {
    font-family: 'Inter', sans-serif;
    color-scheme: dark;
    --surface-1: oklch(0.17 0 0);
    --surface-2: oklch(0.24 0 0);
    --text-1: oklch(0.97 0 0);
    --text-2: oklch(0.57 0 0);
  }
 
}

@layer components.Recommendation {
  .SectionRecommendation {
    /* Adjust the inline size from here */
    --_content: 1500px;

    /* 15px */
    font-size: 0.9375rem;

    border-block: var(--border-size-1) solid oklch(0.97 0 0 / 0.15);
    padding-block: var(--size-3);
    position: relative;
    margin-inline: auto;
    isolation: isolate;

    :where(a, button, p, span, h2) {
      font-size: inherit;
      color: inherit;
    }

    :where(button) {
      border: unset;
      cursor: pointer;
      font-family: inherit;
    }

   h2 {
      font-weight: var(--font-weight-5);

      @media (width < 700px) {
        padding-inline-start: 0.75rem;
      }
    }
    .UserList {
      list-style: none;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth; /* Hide scrollbar */
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
      &::-webkit-scrollbar {
        display: none;
      }
       @media (width < 700px) {
        padding-inline: 0.75rem;
        scroll-padding-inline: 0.75rem;
      }
    }
    .Card {
      scroll-snap-align: start;
      background-color: var(--surface-2);
      border-radius: 10px;
      padding: var(--size-4);
      position: relative;
      inline-size: 240px;
      block-size: 270px;
      padding: 0.875rem;
      text-decoration: none;
      figcaption {
        --_gap: 0.4ex;
      }
      
      img {
        --size: 110px;
        block-size: var(--size);
        inline-size: var(--size);
        border-radius: 150px;
        background: black;
      
      }
      .Name {
        color: var(--text-1);
        font-size: 1.4rem;
        font-weight: bold;
      }

      .Username {
        color: black;
        font-size: 1.2rem;
        font-style: italic;
      }
      :is(.Name, .Username) {
        max-inline-size: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        
      }
      .FollowButton {
        background-color:#6c757d ;
        color: black;
        font-weight: var(--font-weight-5);
        padding-inline: var(--size-5);
        border-radius: 10px;
        padding-block: var(--size-2);
        inline-size: 100%;
        height: 30px;
      }
      .FollowButton:hover{
        background-color: black;
        color: white;
      }
    
    }
    .Controls {
      position: absolute;
      inset-inline: calc(var(--size-9) * -1);
      block-size: 204px;
      z-index: -1;
      .Wrapper {
        --_content: 700px;
      }
      @media (width < 768px) {
        display: none;
      }
    }
    .ControlsBtn {
      inline-size: 44px;
      block-size: 44px;
      padding: 0.75rem;
      border-radius: var(--radius-round);
      background-color: var(--surface-2);
      color: var(--text-2);
      transition: 0.2s ease;
      opacity: 0;

      &:hover {
        scale: 1.07;
      }
      &:active {
        scale: 1.03;
      }   
    }

    &:hover {
      .ControlsBtn {
        opacity: 1;
      }
    }

  
  }
  @layer scrollDrivenAnimation {
    .SectionRecommendation {
      body & {
        timeline-scope: --carousel;
      }
      .Scroller {
        scroll-timeline: --carousel inline;
      }
      .next {
        animation: auto next ease forwards;
        animation-timeline: --carousel;
      }
      .previous {
        animation: auto prev ease forwards;
        animation-timeline: --carousel;
      }
    }

    @keyframes prev {
      from {
        visibility: hidden;
      }
    }
    @keyframes next {
      to {
        visibility: hidden;
      }
    }
  }
}