@import 'variable.css'; 

.ig-body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: var(--off-white);
  height: 100%;

  .ig-container {
    display: grid;
    grid-template-rows: 1fr;
    /* width: 100vw; */
    height: 100%;
    /* margin: auto; */
    padding: 10px;


    /* === LEFT SIDEBAR === */
    @media (max-width: 700px){

    .ig-sidebar-left {
        position: fixed;
        left: -250px;
        /* width: 100%; */
        top: 0;
        /* height: 100vh;*/
        /* width: 100%;  */
        transition: left 0.3s ease;
        z-index: 999;
        padding-top: 60px;
        background-color: var(--pure-white);

        &.open{
          left: 0;
          width: 100%;
          padding: 100px 20px 20px 20px;
        }

        .burger{
          position: fixed; /* or fixed if outside sidebar */
          left: 20px;
          top: 20px;
          font-size: 24px;
          background: var(--white);
          border: 1px solid var(--ash-gray);
          padding: 10px;
          cursor: pointer;
          display: flex;
          align-items: center; /* not align-content */
          width: auto; /* fits content */
          z-index: 1001;
        }

        .ig-top {
          display: flex;
          flex-direction: column;
          gap: 0;
          /* max-width: 100%; */

          .ig-logo {
            display: block;
            width: 120px;
            height: auto;
            
            img{
              width: 100%;
              height: auto;
              object-fit: contain;
            }
          }

          .ig-menu {
            list-style: none;
            padding: 0;
            width: 100%;

            .ig-menu-item {
              margin: 15px 0;
              font-size: 16px;
              cursor: pointer;
              display: flex;
              align-items: center;
              gap: 10px;
              width: 100%;

              a{
                text-decoration: none;
                color: var(--black);
                padding: 5px 0;
              }
            }
          }
        }

        .ig-bottom {
          display: none;
        }
      }}

     /* === Feed === */
      .ig-feed {
      gap: 20px;
      /* height: 100vh; */
      overflow: hidden;
      grid-area: feed;
      padding-top: 80px;

      /* === STORIES === */ 
      .ig-stories{
        max-width: 100%;
        display: flex;
        margin: 0;
        gap: 1rem;
        background-color: var(--pure-white);
        border: 1px solid var(--silver-gray);
        border-radius: 10px;
        padding: 20px 10px;
        overflow-y: hidden;
        scroll-behavior: smooth;
        overflow-x: scroll;
        scrollbar-width: none; 
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
          display: none;
        } 

        .ig-story {
          text-align: center;
          flex-shrink: 0;
          margin-right: 1rem;
          border: none; 
          background-color: transparent;
          cursor: pointer;

          .ig-story-ring {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            padding: 3px;
            background: linear-gradient(45deg, var(--apricot-hue), var(--ember-glow), var(--crimson-bloom), var(--orchid-flare), var(--amethyst-dream));
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            .ig-story-avatar {
              width: 58px;
              height: 58px;
              border-radius: 50%;
              border: 2px solid var(--white);
              object-fit: cover;
            }
          }

          .add-ring {
            background-color: var(--ash-gray);
            width: 64px;
            height: 64px;
            border-radius: 50%;
            padding: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;

            .ig-add-icon {
              position: absolute;
              bottom: -2px;
              right: -2px;
              width: 22px;
              height: 22px;
              border-radius: 50%;
              background: #0095f6;
              color: #fff;
              border: 3px solid white;
              font-size: 20px;
              line-height: 18px;
              font-weight: 700;
              display: flex;
              align-items: center;
              justify-content: center;
              z-index: 2;
            }
          }

          .ig-story-username {
            display: block;
            font-size: 0.8rem;
            margin-top: 0.25rem;
            white-space: nowrap;
          }
      }
    }

      /* === POSTS === */ 

      .ig-feed-scroll{
        display: flex;
        flex-flow: column nowrap;
        gap: 1rem;
        /* height: 100vh; */
        overflow: hidden;
        margin-top: 1rem;
        overflow-y: hidden;
        scroll-behavior: smooth;
        overflow-y: scroll;
        scrollbar-width: none; 
        -ms-overflow-style: none;
        flex: 1;

        &::-webkit-scrollbar {
          display: none;
        } 
        
        .ig-feed-post {
          background-color: var(--pure-white);
          border: 1px solid var(--silver-gray);
          border-radius: 10px;
          padding: 10px;
          width: 100%;
          /* max-width: 600px; */
          margin: 0 auto;

          /* &:last-of-type{
            margin-bottom: 100px;
          } */

          .ig-post-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;

            .user{
              display: flex;
              align-items: center;
              gap: 0.2rem;

              .ig-post-profile-img {
                width: 35px;
                height: 35px;
                border-radius: 50%;
              }

              .ig-post-username{
                font-weight: bold;
              }

            }

            .update-delete{
              display: flex;
              gap: 1rem;

              form > button{
                border: none;
                background-color: transparent;
                
              }
            }



            
          }

          .post-message{
            display: flex;
            gap: 0.2rem;
            margin-bottom: 0.5rem;

            >p:first-of-type{
              font-weight: bold;
            }
          }

          .ig-post-actions {
            display: flex;
            gap: 15px;

            button{
              border: none;
              background-color: transparent;
            }
          }

          .ig-post-slider {
            position: relative;
            width: 100%;
            max-width: 500px;
            overflow: hidden;
            margin: 0.9rem auto;

            .slider-images {
              display: flex;
              transition: transform 0.4s ease;
              width: 100%;

              >img{
                width: 100%;
                flex-shrink: 0;
                object-fit: cover;
              }
            }

            .slider-btn {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              background-color: rgba(0, 0, 0, 0.4);
              color: white;
              border: none;
              border-radius: 50%;
              width: 35px;
              height: 35px;
              cursor: pointer;
              font-size: 18px;
              display: flex;
              justify-content: center;
              align-items: center;
              z-index: 5;

              &:hover {
                background-color: rgba(0, 0, 0, 0.7);
              }
            }

            .slider-btn.prev {
              left: 10px;
            }

            .slider-btn.next {
              right: 10px;
            }
          }

            .comments-form{
              margin: 0.5rem 0;

              &.hidden {
                display: none;
              }

              form{
                padding: 20px 0;
                
                input{
                  border-radius: 5px;
                  padding: 5px;
                }
                

                button {
                  margin-left: auto;    
                  padding: 5px 10px;
                  border: none;
                  background-color: var(--midnight-navy);
                  color: var(--white);
                  border-radius: 4px;
                  cursor: pointer;

                  &:hover {
                    background-color: var(--steel-slate);
                  }
                }
              }

            }
            .comments-container{
              display: flex;
              flex-flow: column nowrap;
              gap: 1rem;

              .user-comment{
                display: flex;
                justify-content: space-between;
                gap: 0.8rem;
                margin-top: 1rem;

                .user-posting{
                  display: flex;
                  gap: 0.5rem;

                  .ig-suggestion-img {
                  width: 40px;
                  height: 40px;
                  border-radius: 50%;
                  }

                  .follow-direction {
                    display: flex;
                    flex-direction: column; 
                    justify-content: center; 
                    text-align: left; 
                    overflow: hidden;      
                  }

                  .ig-suggestion-name {
                    font-weight: bold;
                    margin: 0; 
                    white-space: nowrap;   
                    overflow: hidden;
                    text-overflow: ellipsis;            
                  
                  }
                }
                .delete-comment{
                  form >button{
                    border: none;
                    background-color: transparent;
                  }
                }

                
                
              }
            }   
        }
      } 
    
    }


    .ig-sidebar-right{
      display: none;
      grid-area: aside;
    }
    
  }
}








@media screen and (min-width: 700px){
  .ig-body {
    .ig-container {
      display: grid;
      grid-template-areas: "nav feed";
      width: 100%;
      height: 100vh; 


      /* === LEFT SIDEBAR === */
      .ig-sidebar-left {
        display: block;
        flex: 0 0 250px;
        max-width: 300px;
        min-width: 220px;
        padding: 20px;
        background-color: var(--pure-white);
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 0;

        .burger{
            display: none;
        }

        .ig-top {
          display: flex;
          flex-direction: column;
          gap: 0;

          .ig-logo {
            display: block;
            width: 120px;
            height: auto;
            
            img{
              width: 100%;
              height: auto;
              object-fit: contain;
            }
          }

          .ig-menu {
            list-style: none;
            padding: 0;

            .ig-menu-item {
              margin: 15px 0;
              font-size: 16px;
              cursor: pointer;
              display: flex;
              align-items: center;
              gap: 10px;

              a{
                text-decoration: none;
                color: var(--black);
                width: 100%;
              }
            }
          }
        }

        .ig-bottom {
          display: block;
          display: flex;
          flex-direction: column;
          gap: 20px;

          .ig-profile {
            display: flex;
            align-items: center;
            margin-top: 30px;

            .ig-profile-img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
            }

            .ig-profile-info {
              margin-left: 10px;
              display: flex;
              flex-direction: column;

              .ig-profile-name {
                font-weight: bold;
              }

              .ig-profile-handle {
                font-size: 12px;
                color: #8e8e8e;
              }
            }
          }
        }
      }


      /* === Feed === */
      .ig-feed {
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden; 

        .ig-feed-scroll{
          max-width: 600px;
          margin: 10px auto;
        }



      } 
    }
  }
}

@media screen and (min-width: 900px){
  .ig-body {
    .ig-container {
      display: grid;
      grid-template-columns: 250px 1fr 300px;
      grid-template-areas: "nav feed aside";

      /* === RIGHT SIDEBAR === */
      .ig-sidebar-right {
        display: block;
        flex: 0 0 280px;
        max-width: 320px;
        min-width: 240px;
        position: sticky;
        height: 100vh;
        top: 0;
        overflow: hidden;

        .ig-search{
          width: 100%;
          position: relative;
          display: flex;
          align-items: center;
          width: 100%;
          background-color: var(--pure-white);
          border: 1px solid var(--silver-gray);
          padding: 8px 16px;
          border-radius: 10px;    
          gap: 0.2rem;
              

            > input {
              flex: 1;
              border: none;
              outline: none;
              font-size: 1rem;
              background: transparent;
            }

            > button {
              background: none;
              border: none;
              font-size: 1rem;
              color: var(--midnight-navy);
              cursor: pointer;
            }

            #search_results {
              position: absolute;
              top: 100%;          
              left: 0;
              width: 100%;      
              z-index: 1000;      
              background: var(--pure-white);
              padding: 10px;
              border-radius: 0 0 15px 15px; 

              .ig-suggestion{
                display: flex;           
                align-items: center; 
                justify-content: space-between;    
                gap: 10px; 
                margin: 10px 0;

                .ig-suggestion-img {
                  width: 40px;
                  height: 40px;
                  border-radius: 50%;
                }

                .follow-direction {
                  display: flex;
                  flex-direction: column; 
                  justify-content: center; 
                  text-align: left; 
                  overflow: hidden; 
                  
                  .ig-suggestion-name {
                    font-weight: bold;
                    margin: 0; 
                    white-space: nowrap;   
                    overflow: hidden;
                    text-overflow: ellipsis;            
                  }

                  .handle {
                    margin: 0;
                    color: var(--stone-gray);           
                    font-size: 0.75rem;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  
                  }
                }

                button{
                  margin-left: auto;    
                  padding: 5px 10px;
                  border: none;
                  background-color: var(--midnight-navy);
                  color: var(--white);
                  border-radius: 4px;
                  cursor: pointer;

                  &:hover {
                    background-color: var(--steel-slate);
                  }
                }
              }
            }
          }
        }

        .ig-suggestions {
          padding: 15px;
          z-index: 20;

          .ig-suggestion {
            display: flex;           
            align-items: center; 
            justify-content: space-between;    
            gap: 10px; 
            margin: 10px 0;  

            .user-introduction{
              display: flex;
              gap: 0.8rem;

              .ig-suggestion-img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
              }

              .follow-direction {
                display: flex;
                flex-direction: column; 
                justify-content: center; 
                text-align: left; 
                overflow: hidden;      
              }

              .ig-suggestion-name {
                font-weight: bold;
                margin: 0; 
                white-space: nowrap;   
                overflow: hidden;
                text-overflow: ellipsis;            
              }

              .handle {
                margin: 0;
                color: var(--stone-gray);           
                font-size: 0.75rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }

            }

            button {
              margin-left: auto;    
              padding: 5px 10px;
              border: none;
              background-color: var(--midnight-navy);
              color: var(--white);
              border-radius: 4px;
              cursor: pointer;

              &:hover {
                background-color: var(--steel-slate);
              }
            }
          }
      }  
      
    }
  }
}