.modal.wishlist-modal dialog {
  & .modal-container {
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;

    .modal-content {
      overflow: hidden;

      .wishlist-popup {
        .wishlist-popup-header {
          display: flex;
          flex-direction: column;
          padding: 0 var(--spacing-l);
        }

        .wishlist-popup-body {
          padding: 0 var(--spacing-l);

          .wishlist-create-link {
            display: inline-block;
            margin: var(--spacing-l) 0;
            color: var(--primary-color);
            font-size: var(--fs-small);
            font-weight: var(--fw-500);
            line-height: var(--lh-medium);
            text-decoration: none;
            position: relative;
            padding-left: 18px;

            &::before {
              content: '';
              width: 17px;
              height: 17px;
              background-image: url('/genuine-accessories/icons/accordion-expand.svg');
              background-repeat: no-repeat;
              background-size: contain;
              position: absolute;
              top: 1px;
              left: 0;
            }
          }

          .wishlist-list-container {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-small);
            max-height: 167px;
            overflow-y: auto;

            @media screen and (width > 360px) {
              max-height: 247px;
            }

            .wishlist-list-sub-text {
              margin-top: var(--spacing-small);
              font-size: var(--fs-medium);
              font-weight: var(--fw-500);
            }

            .wishlist-list-add-new {
              display: flex;
              flex-direction: column;
              gap: var(--spacing-xsmall);
              font-size: var(--fs-medium);

              label {
                margin-top: var(--spacing-l);
                font-weight: var(--fw-500);
              }

              input[type='text'] {
                font-weight: var(--fw-400);
                padding: var(--spacing-xsmall);
                border-radius: 0;
                border: 1px solid;

                &:focus {
                  border-color: var(--primary-color);
                }
              }

              .err-text {
                display: none;
                font-size: var(--fs-xsmall);
                font-weight: var(--fw-400);
                line-height: var(--lh-16);
                color: var(--color-error);
              }

              &.err {
                input[type='text'] {
                  border-color: var(--color-error);
                }

                .err-text {
                  display: block;
                }
              }
            }

            .wishlist-list-item {
              background-color: var(--bg-grey-light);
              margin: 0;
              display: flex;
              align-items: center;
              cursor: pointer;
              padding: 0 var(--spacing-small);

              &.selected {
                background-color: var(--icon-bg);
              }

              input[type='checkbox'] {
                appearance: none;
                width: 24px;
                height: 24px;
                margin: auto;
                border: 1px solid var(--neutrals-unfilled-inactive);
                position: relative;
                cursor: pointer;

                &:checked {
                  background-color: var(--primary-color);
                  border-color: var(--primary-color);

                  &::after {
                    content: '';
                    background-image: url('/genuine-accessories/icons/tick-white.svg');
                    background-repeat: no-repeat;
                    background-size: contain;
                    width: 24px;
                    height: 24px;
                    color: var(--tertiary-color);
                    font-size: var(--fs-small);
                    position: absolute;
                    top: -2px;
                    left: -1px;
                  }
                }
              }

              label {
                display: flex;
                flex-direction: column;
                gap: var(--spacing-xxsmall);
                cursor: pointer;
                width: 100%;
                padding: var(--spacing-small);

                .wishlist-name {
                  font-size: var(--fs-small);
                  font-weight: var(--fw-500);
                  line-height: var(--lh-medium);

                  @media screen and (width > 360px) {
                    font-size: var(--fs-medium);
                  }
                }

                .wishlist-item-count {
                  font-size: var(--fs-xsmall);
                  font-weight: var(--fw-400);
                  color: var(--ui-text-icon-medium);
                  line-height: var(--lh-16);

                  @media screen and (width > 360px) {
                    font-size: var(--fs-small);
                  }
                }
              }
            }
          }
        }

        .wishlist-popup-footer {
          display: flex;
          justify-content: space-between;
          gap: var(--spacing-xsmall);
          margin-top: var(--spacing-medium);
          padding: var(--spacing-l);
          box-shadow:
            0 7px 10px 0 rgba(0 0 0 / 9%),
            0 20px 50px 0 rgba(0 0 0 / 20%);

          button {
            text-align: center;
            width: 100%;
          }

          .wishlist-cancel-btn {
            display: none;

            @media screen and (width > 360px) {
              display: block;
            }
          }
        }

        &.delete-wishlist-popup {
          .wishlist-popup-body {
            .wishlist-list-container {
              .wishlist-list-item {
                margin-top: var(--spacing-l);
                padding: 0;

                label {
                  cursor: default;
                }
              }
            }
          }
        }
      }
    }
  }
}

.commerce-wishlist__not-authenticated {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 402px;
  margin: 0 auto var(--container-margin);
  padding: 0 var(--container-margin);

  img {
    object-fit: cover;
  }

  span {
    font-size: var(--fs-small);
    font-weight: var(--fw-400);
    line-height: normal;

    &:first-of-type {
      font-weight: var(--fw-700);
      color: var(--color-primary-blue);
      margin-top: var(--sizing-xl);

      @media (width >= 1024px) {
        font-weight: var(--fw-600);
        color: var(--neutrals-sub-texts-paragraphs);
      }
    }

    &:last-of-type {
      margin: var(--spacing-xxsmall) 0 var(--spacing-small);
      color: var(--neutrals-unfilled-inactive);

      @media (width >= 1024px) {
        color: var(--neutrals-sub-texts-paragraphs);
      }
    }

    @media (width > 768px) {
      font-size: var(--fs-medium);
      line-height: var(--lh-20);
    }
  }

  .dropin-button--full-width {
    width: 100%;
    padding: var(--spacing-xsmall) var(--sizing-xl);
    height: 40px;
    line-height: var(--lh-medium);
    letter-spacing: 0.14px;

    @media (width >= 1024px) {
      width: 295px;
      line-height: var(--lh-small);
      letter-spacing: normal;
    }
  }
}

.wishlist:has(.wishlist-sticky-bar-wrapper) {
  .toast-message.temp-toast {
    bottom: 75px;
  }
}