.social-share-overlay-list-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);

  .social-share_title {
    color: var(--ui-text-icon-high);
    font-size: var(--fs-large);
    font-weight: var(--fw-700);
    line-height: var(--lh-large);
    padding: var(--spacing-none);
  }

  ul {
    display: flex;
    gap: 4px;

    li {
      border: 1px solid var(--ui-border-color);
      display: flex;
      width: 60px;
      height: 60px;
      padding: var(--spacing-2xs);
      justify-content: center;
      align-items: center;
      cursor: pointer;

      span.icon {
        width: var(--sizing-xl);
        height: var(--sizing-xl);
        flex-shrink: 0;
        aspect-ratio: 1/1;
      }

      span.icon.icon-facebook {
        width: 40px;
        height: 40px;
      }
    }

    li.active,
    li:hover {
      border: 1px solid var(--primary-color);
    }
  }

  .social-share_copy-wrapper {
    span {
      color: var(--neutrals-headings);
      font-size: var(--fs-medium);
      font-weight: var(--fw-500);
      line-height: var(--lh-medium);
    }

    .social-share_copy-url {
      .social-share_url--wrapper {
        width: 100%;
        margin-top: var(--spacing-xsmall);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-none) var(--spacing-xsmall);
        background-color: var(--ui-surface-glass-regular);
        height: 44px;

        .social-share_copy-input {
          color: var(--ui-text-icon-high);
          flex-grow: 1;
          text-overflow: ellipsis;
          font-size: var(--fs-medium);
          font-weight: var(--fw-400);
          line-height: 22px;
          border: none;
          background-color: transparent;
          text-decoration: underline;
          height: 100%;
          padding: var(--spacing-none);
        }

        .social-share_copy-button {
          color: var(--primary-color);
          font-size: var(--fs-small);
          font-weight: var(--fw-500);
          line-height: var(--lh-normal);
          white-space: nowrap;
          padding: var(--spacing-none) var(--spacing-2xs);
          height: 100%;
          display: flex;
          align-items: center;

          @media (width >= 768px) {
            line-height: var(--lh-medium);
          }
        }
      }

      .toast-message {
        width: fit-content;
        position: absolute;
        bottom: -28px;
        padding: var(--spacing-xsmall) var(--spacing-none) var(--spacing-none);
        margin-bottom: var(--spacing-none);

        .toast-message__text {
          color: #1a4993;
          font-size: 14px;
          line-height: var(--lh-medium);
          letter-spacing: 0.14px;
        }

        .toast-message__text::before {
          width: 20px;
          height: 20px;
          margin-right: var(--spacing-xsmall);
        }
      }

      .toast-message.toast--success {
        background-color: transparent;
        box-shadow: none;

        .toast-message__text::before {
          background: center / contain no-repeat url('/genuine-accessories/icons/link-copied.svg');
        }
      }
    }
  }
}

.social-share_button-bar {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xsmall);

  .button {
    flex: 1;
    width: 100%;
    height: 40px;
    padding: 8px 24px;
    font-size: var(--fs-small);
    font-weight: var(--fw-500);
    line-height: var(--lh-medium);
    letter-spacing: 0.14px;
  }
}

@media (width >= 768px) {
  .social-share .social-share-overlay-list-wrapper {
    padding-top: var(--spacing-none);
  }
}

.modal.share-modal {
  .modal-container {
    border-radius: 0;
    padding: var(--spacing-none);

    @media (width >= 768px) and (width < 1024px) {
      bottom: 50%;
      left: 50%;
      transform: translate(-50%, 50%);
      width: 80%;
      width: 520px;
    }

    .modal-header {
      @media (width >= 768px) {
        position: absolute;
        right: 0;
      }

      .close-button-container {
        @media (width >= 768px) and (width < 1024px) {
          justify-content: flex-end;
        }
      }
    }

    @media (width >= 768px) {
      .close-button {
        position: unset;
        transform: none;
        background: transparent;
        backdrop-filter: unset;
      }
    }

    @media (width >= 768px) and (width < 1024px) {
      .icon.icon-close {
        filter: invert(1);
      }
    }

    .modal-content {
      padding: var(--spacing-3xl) var(--spacing-l) var(--spacing-3xl);
    }

    .modal-footer {
      padding: var(--sizing-m) var(--spacing-l) var(--spacing-3xl);

      @media(width>=1024px) {
        box-shadow: var(--shadow-elevation);
      }
    }
  }
}