html[data-scroll-comp="360-view"] {
  scroll-padding-top: 40px;
  @media (width >= 1024px) {
    scroll-padding-top: 100px;
  }
}

div[class='360-view-wrapper'] {
  background: url('/icons/bg-360.png') no-repeat center;
  background-size: cover;

  @media (width >= 1024px) {
    background: url('/icons/bg-360-desk.png') no-repeat center / cover;
  }
}

.view360__container {
  padding-block: 48px 40px;
  padding-inline: 0;
  position: relative;
  .view360__heading-container {
    text-align: center;
    .view360-heading {
      margin: 0;
      font-weight: 700;
      font-size: 1.5rem;
      line-height: 1.875rem;
      font-style: normal;
      margin-bottom: 16px;
      color: var(--neutrals-headings);
      font-family: var(--body-font-family);
    }

    .view360-description {
      margin: 0;
      font-weight: 400;
      font-style: normal;
      font-size: 0.875rem;
      line-height: 1.125rem;
      color: var(--tertiary-black);
      font-family: var(--body-font-arena);
    }
  }

  .view360-canvas-circle-btn-wrapper {
    margin: 93px auto 0;
    position: relative;

    @media (width >= 1024px) {
      bottom: 15%;
      top: unset;
    }

    @media (1366px <= width <= 1499px) {
      top: 20%;
      margin-top: 60px;
    }

    @media (width >= 1500px) {
      top: 10%;
    }

    .view360-canvas {
      width: 100%;
      cursor: grab;
      display: block;
      position: relative;

      &:active {
        cursor: grabbing;
      }
    }

    .view360-circleBtn {
      left: 50%;
      bottom: -21px;
      position: absolute;
      background: var(--secondary-gray-10);
      width: 40px;
      height: 40px;
      padding: 5px;
      border: none;
      border-radius: 50%;
      transform: translateX(-50%);
      box-shadow: 0px 2px 12.5px rgba(0, 0, 0, 0.15);
      display: flex;
      justify-content: center;
      align-items: center;
      @media (width >=1024px) {
        width: 77.472px;
        bottom: -42px;
        height: 77.472px;
      }
      .arrow-left,
      .arrow-right {
        cursor: auto;
        font-size: 0.75rem;
        &::after {
          content: '';
          width: 15px;
          height: 24px;
          display: block;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
          @media (width >=1024px) {
            width: 32px;
            height: 32px;
          }
        }
      }

      .arrow-left::after {
        background-image: url('/icons/car-details-arrow_right.png');
      }

      .arrow-right::after {
        background-image: url('/icons/car-details-arrow_left.png');
      }
    }
  }
  .view360-colors-carousel-wrapper {
    margin-top: 48px;
    padding-inline: 20px;
    .color-container {
      .carousel-title {
        margin: 0;
        color: #1d1d1d;
        font-feature-settings:
          'liga' off,
          'clig' off;
        font-family: var(--body-font-arena);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        display: inline-block;
        width: 100%;
        text-align: center;

        &.large-screen {
          display: none;
          font-size: 14px;
          font-weight: 600;
          line-height: 20px;
          text-align: start;
          font-style: normal;
          color: #939393;
          font-family: var(--body-font-arena);
        }
      }
      .view360__colors-wrapper {
        gap: 14px;
        display: flex;
        margin-top: 16px;
        align-items: flex-end;
        justify-content: center;

        @media (width >= 768px) {
          justify-content: center;
        }

        &.no-arrows {
          justify-content: center;
        }

        .view360__colors-list {
          gap: 20px;
          width: 244px;
          display: flex;
          overflow: hidden hidden;
          scroll-behavior: smooth;
          scrollbar-width: none;
          position: relative;
          padding-top: 36px;

          @media (width >= 1024px) {
            gap: 23px;
            width: 307px;
          }

          .swatch-color {
            border: 1px solid var(--dark-color);
            cursor: pointer;
            flex-shrink: 0;
            transition: transform 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 24px;
            height: 24px;

            @media (width >= 1024px) {
              width: 32px;
              height: 32px;
            }

            &::before {
              color: var(--secondary-main);
              font-family: var(--body-font-family);
              font-size: 0.75rem;
              font-style: normal;
              font-weight: 400;
              line-height: 1rem;
              position: absolute;
              top: -30px;

              @media (width >= 1024px) {
                font-weight: var(--fw-600);
                color: var(--inactive-content);
                line-height: 1.125rem;
              }
            }

            &.selected {
              &::after {
                content: '';
                width: 17.5px;
                height: 17.5px;
                margin: auto;
                display: flex;
                position: relative;
                top: 0;
                background-image: url('/icons/check.svg');
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
              }

              &::before {
                content: attr(data-content);
                left: 0;
              }
            }
          }

          div {
            cursor: pointer;
            flex-shrink: 0;

            &.view360_white_palette.view360__colors-white {
              border: none;
            }

            &.view360_white_palette {
              border: 0.5px solid var(--tertiary-medium-grey);
            }

            &.view360__colors-white span {
              content: '';
              position: absolute;
              height: 32px;
              width: 32px;
              border: 0.5px solid #b2b2b2;
              top: 0;
              left: 0;
            }

            &.selected {
              &::after {
                content: '';
                width: 17.5px;
                height: 17.5px;
                margin: auto;
                position: relative;
                top: 0;
                display: flex;
                background-image: url(/icons/check.svg);
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
              }

              &::before {
                content: attr(data-content);
                white-space: nowrap;
                z-index: 1;
              }

              &.text-wrap {
                &::before {
                  width: 150px;
                  white-space: normal;
                  top: -40px;
                }
              }

              @media (width >=768px) {
                &.text-wrap {
                  &::before {
                    text-align: left;
                    word-wrap: break-word;
                    margin-top: 0;
                  }
                }
              }

              &.selected.view360__colors-white::after,
              &.view360_white_palette::after {
                background-image: url(/icons/check-grey.svg);
              }

              &.align-label-left {
                &::before {
                  right: 0;
                  left: auto;
                }
              }
            }
          }
        }

        .slide-icon {
          cursor: pointer;
          content: '';
          width: 24px;
          height: 24px;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;

          @media (width >= 1024px) {
            width: 32px;
            height: 32px;
          }

          &.disabled {
            opacity: 0.4;
            cursor: default;
          }
        }

        .slide-right {
          background-image: url('/icons/arrow-fiiled-blue_right.svg');
        }

        .slide-left {
          background-image: url('/icons/arrow-filled-blue_left.svg');
        }
      }
    }
  }

  .view360-cta-wrapper {
    margin-top: 50px;
    padding-inline: 20px;
    .cta__primary {
      a {
        display: block;
        font-weight: 400;
        letter-spacing: normal;

        &::after {
          display: none;
          filter: invert(1);
          scale: 1.25;
          position: relative;
          top: -2px;
        }

        &.button {
          border: none;
        }
      }
    }
  }

  .view360__not-available {
    padding: 8px 0;
    width: 250px;
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    position: absolute;
    bottom: 25%;
    left: 56px;
    @media (width >= 768px) {
       bottom: 22%;
    }
    @media (width >= 1024px) {
       bottom: 13%;
    }
    * {
      font-size: 0.875rem;
      font-weight: var(--fw-400);
      color: var(--tertiary-black);
      line-height: 1.125rem;
    }

    &.hidden {
      display: none;
    }

    p {
      margin: 0;
    }

    svg {
      height: 20px;
      width: 20px;
    }

    .svg-div {
      margin-top: -1px;
      width: 20px;
      height: 20px;
    }
  }

  .show-mob {
    display: block;

    @media (width >= 1024px) {
      display: none;
    }
  }

  .show-desk {
    display: none;

    &.view360-cta-wrapper {
      padding-left: 0;
      margin-top: 40px;
      width: fit-content;
    }

    @media (width >= 1024px) {
      display: block;
    }
  }
}

@media (width >= 1024px) {
  .view360__container {
    padding-block: 84px 40px;
    height: 798px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr 1fr;
    position: relative;

    > * {
      place-self: flex-start;
    }
    .view360__heading-container {
      text-align: start;
      grid-column: 1 / 11;
      grid-row: 1 / 1;
      .view360-heading {
        font-size: 2.5rem;
        line-height: 48px;
        margin-bottom: 24px;
      }
      .view360-description {
        font-size: 1.5rem;
        line-height: 28px;
        font-family: var(--body-font-family);
      }
    }
    .view360-canvas-circle-btn-wrapper {
      /* grid-column: 2 / 11;
      grid-row: 1 / 2; */
      position: absolute;
      left: 40%;
      transform: translate(-30%);
      .view360-canvas {
        width: 100%;
        height: 100%;
        max-width: 1042px;
        aspect-ratio: 16 / 9;
      }
    }
    .view360-colors-carousel-wrapper {
      margin-top: 0;
      padding: 0;
      .color-container {
        /* width: 306px; */
        .carousel-title {
          display: none;
          &.large-screen {
            display: block;
          }
        }
        .view360__colors-wrapper {
          .view360__colors-list {
            flex-wrap: nowrap;
          }
        }
      }
    }
    .view360-cta-wrapper {
      margin: 0;
      padding: 0;
      grid-column-start: 1;
      padding-left: var(--container-margin);
      .cta__primary {
        a.button {
          white-space: nowrap;
        }
      }
    }
  }
}