Untitled

@import "../../../../assets/scss/media";

#matchScoreCard {
    padding: 0.5rem 0 6rem;

.scoreCardContainer {

    .slick-slider {
        position: relative;
    
        .slick-arrow {
          width: 2.6rem;
          height: 2.6rem;
    
          &.slick-prev {
            left: 45%;
            top: unset;
            bottom: -65px;
            z-index: 11;

            @include d-desktop {
              left: 42%;
            }
    
            @include x-767-tablet {
              left: 42%;
            }
    
            &.slick-disabled {
              opacity: 0.75;
            }
    
            &:before {
              font-size: 3.6rem;
              opacity: 1;
              color: #172046;
            }
          }
    
          &.slick-next {
            left: 50%;
            top: unset;
            bottom: -65px;
            z-index: 11;
    
            @include d-desktop {
              left: 52%;
            }
    
            @include x-767-tablet {
              left: 52%;
            }
    
            &.slick-disabled {
              opacity: 0.75;
            }
    
            &:before {
              font-size: 3.6rem;
              opacity: 1;
              color: #172046;
            }
          }
        }
    
        .slick-list {
          .slick-track {
            width: 7885px;
            opacity: 1;
            transform: translate3d(-6640px, 0px, 0px);
            .slick-slide {
              padding: 0 0.5rem;
    
              @include x-767-tablet {
                padding: 0;
              }
            }
          }
        }
    
        .slick-dots {
          position: relative;
          display: flex !important;
          justify-content: center;
          align-items: center;
          margin-top: 1rem;
          gap: 0.2rem;
    
          li {
            width: 3.5rem;
            height: 0.5rem;
            background-color: #9e9999;
            border-radius: 1rem;
    
            &.slick-active {
              background-color: #fff;
            }
    
            button {
              width: 3.5rem;
              height: 0.5rem;
              padding: 0;
              border-radius: 1rem;
    
              &::before {
                content: none;
              }
            }
          }
        }
      }

    // .slick-slider {
    //   position: relative;
    
    //   .slick-arrow {
    //     width: 2.6rem;
    //     height: 2.6rem;
    
    //     &.slick-prev {
    //       left: -3.5rem; // Position the arrow to the left side of the slider
    //       top: 50%; // Vertically center the arrow
    //       transform: translateY(-50%); // Align properly
    //       z-index: 11;
    
    //       @include d-desktop {
    //         left: -3.5rem;
    //       }
    
    //       @include x-767-tablet {
    //         left: -2.5rem;
    //       }
    
    //       &.slick-disabled {
    //         opacity: 0.75;
    //       }
    
    //       &:before {
    //         font-size: 3.6rem;
    //         opacity: 1;
    //         color: #172046;
    //       }
    //     }
    
    //     &.slick-next {
    //       right: -3.5rem; // Position the arrow to the right side of the slider
    //       top: 50%; // Vertically center the arrow
    //       transform: translateY(-50%); // Align properly
    //       z-index: 11;
    
    //       @include d-desktop {
    //         right: -3.5rem;
    //       }
    
    //       @include x-767-tablet {
    //         right: -2.5rem;
    //       }
    
    //       &.slick-disabled {
    //         opacity: 0.75;
    //       }
    
    //       &:before {
    //         font-size: 3.6rem;
    //         opacity: 1;
    //         color: #172046;
    //       }
    //     }
    //   }
    
    //   .slick-list {
    //     .slick-track {
    //       width: 7885px;
    //       opacity: 1;
    //       transform: translate3d(-6640px, 0px, 0px);
    //       .slick-slide {
    //         padding: 0 0.5rem;
    
    //         @include x-767-tablet {
    //           padding: 0;
    //         }
    //       }
    //     }
    //   }
    
    //   .slick-dots {
    //     position: relative;
    //     display: flex !important;
    //     justify-content: center;
    //     align-items: center;
    //     margin-top: 1rem;
    //     gap: 0.2rem;
    
    //     li {
    //       width: 3.5rem;
    //       height: 0.5rem;
    //       background-color: #9e9999;
    //       border-radius: 1rem;
    
    //       &.slick-active {
    //         background-color: #fff;
    //       }
    
    //       button {
    //         width: 3.5rem;
    //         height: 0.5rem;
    //         padding: 0;
    //         border-radius: 1rem;
    
    //         &::before {
    //           content: none;
    //         }
    //       }
    //     }
    //   }
    // }
    
  }
}