@media (max-width: 767.98px) {
  :root {
    scrollbar-width: none;
  }
}

.video-feed-module {
	display: flow-root;
  background: var(--background);
  margin-top: calc(var(--header-bottom-margin) * -1);
  margin-bottom: var(--module-spacing, var(--spacing));
  
  .title-wrapper {
    @media (max-width: 767.98px) {
      width: 100vw;
      position: absolute;
      z-index: 10;
      background: var(--background);
    }
    
    .title {
      margin-top: var(--header-bottom-margin);
      margin-bottom: var(--title-spacing, var(--spacing));
    }
  }
  .container-fluid {
    @media (max-width: 767.98px) {
      padding: 0;
    }
    
    .swiper {
      @media (max-width: 767.98px) {
        height: calc(100dvh - var(--website-header-height) + var(--header-bottom-margin));
      }

      .videos {    
        @media (min-width: 768px) {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          row-gap: 1rem;
        }

        .video-wrapper-outer {
          position: relative;
          color: white;
          background: black;
          overflow: clip;
          
          .video-title {
            position: absolute;
            left: var(--video-padding-left);
            bottom: var(--video-padding-bottom);
          }

          .additional-buttons {
            position: absolute;
            right: var(--video-padding-right);
            bottom: var(--video-padding-bottom);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;

            .button-wrapper {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: .5rem;

              button, a {
                padding: 0;
                border-radius: 50%;
                background: none;
                color: inherit;

                svg {
                  width: var(--additional-button-size);
                  height: var(--additional-button-size);
                  &, * {
                    transition: all .15s;
                    transform-origin: center;
                  }
                }

                &:hover {
                  svg {
                    path {
                      scale: 1.1;
                    }
                  }
                }

                &:active {
                  svg {
                    path {
                      scale: 0.9;
                    }
                  }
                }

                &[data-clicked="true"] {
                  svg {
                    fill: white;
                  }
                }
              }
            }
          }

          .share-interface {
            display: flex;
            justify-content: center;
            position: absolute;
            top: 100%;
            width: 100%;
            height: 100%;
            z-index: 2;
            transition: background .3s;
            cursor: default;

            .share-container {
              margin-top: auto;
              width: 100%;
              margin-inline: 0.5rem;
              translate: 0 100%;
              padding: 1rem;
              border-radius: 1.5rem 1.5rem 0 0;
              background: #ffffff;
              color: black;
              transition: translate .3s;
            }

            &.active {
              top: 0;
              background: #00000094;
              .share-container {
                translate: 0 0;
              }
            }

            &.close {          
              background: transparent;

              .share-container {
                translate: 0 100%;
              }
            }
          }

          .spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            width: 20%;
            height: auto;
            aspect-ratio: 1;
            border: 10px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            pointer-events: none;

            &:not(.show) {
              display: none;
            }
          }

          &::after {
            content: '';
            position: absolute;
            inset: 0;
            transition: background .15s;
            pointer-events: none;
          }

          &.darken {
            &::after {
              background: rgba(0, 0, 0, var(--darken-opacity));
            }
          }

          .video-wrapper {
            position: relative;
            cursor: pointer;

            &::before {
              content: '';
              position: absolute;
              inset: 0;
              pointer-events: none;
              background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%);
            }

            .play-btn {
              opacity: 1;
              position: absolute;
              top: 50%;
              left: 50%;
              translate: -50% -50%;
              display: flex;
              align-items: center;
              justify-content: center;
              width: var(--button-size);
              height: var(--button-size);
              background: var(--button-background);
              border: 1px solid #FFFFFF;
              border-radius: 50%;
              transition: scale .15s, opacity .15s;

              &.hide {
                opacity: 0;
              }

              i {
                display: block;
                width: 0;
                height: 0;
                border-top: 12px solid transparent;
                border-bottom: 12px solid transparent;
                border-left: 20px solid #ffffff;
              }
            }

            video {
              width: 100%;
              height: auto;
              aspect-ratio: 9 / 16;
              object-fit: cover;
              pointer-events: none;

              @media (max-width: 767.98px) {
                scroll-snap-align: start;
                height: 100dvh;
                aspect-ratio: unset;
              }
            }
            
            &:hover {
              .play-btn {
                scale: 1.1;
              } var(--video-padding-top)
            }
            &:active {
              .play-btn {
                scale: 0.9;
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 575.98px) {  }

@media (max-width: 767.98px) {
  .video-feed-module .videos::-webkit-scrollbar {
    display: none;
  }
  :root::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 991.98px) {  }

@media (max-width: 1199.98px) {  }

@media (max-width: 1399.98px) {  }

@keyframes spin {
  to { transform: rotate(360deg); }
}