.cpap__product-share-popover {
  display: flex;
  @media (max-width: 992px) {
    order: 2;

    transform: translate(0, -4px);
  }
  .cpap__product-share-popover__button {
    width: 40px;
    height: 40px;
    border: 1px solid var(--cpap-stroke-gray);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    &:before {
      content: '';
      width: 16px;
      height: 17px;
      background-image: url('./Share.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      position: absolute;
      top: 49%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      transition: all 0.2s;
    }
    &:hover {
      &:before {
        @media (min-width: 768.5px) {
          opacity: 0.7;
        }
      }
    }
    &:active {
      &:before {
        opacity: 0.7;
      }
    }
    .cpap__product-share-popover__icons {
      position: absolute;
      left: 0;
      top: calc(100% + 4px);
      z-index: 2;
      background: var(--cpap-primary-beige);
      border-radius: 8px;
      padding: 8px 4px;
      display: flex;
      align-items: center;
      z-index: 4;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
      @media (max-width: 992px) {
        left: initial;
        right: 0;
      }
      &.cpap__product-share-popover__icons--show {
        opacity: 1;
        visibility: visible;
      }
      .cpap__product-share-popover__icon {
        margin: 0 4px;
        width: 20px;
        height: 20px;
        position: relative;
        display: inline-block;
        &:before {
          content: '';
          width: 16px;
          height: 16px;
          display: inline-block;
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 1;
          transition: all 0.2s;
        }
        &:hover {
          &:before {
            @media (min-width: 768.5px) {
              opacity: 0.7;
            }
          }
        }
        &:active {
          &:before {
            opacity: 0.7;
          }
        }
        &.cpap__product-share-popover__icon--facebook {
          &:before {
            width: 8px;
            height: 17px;
          }
          &.is-visible {
            &:before {
              background-image: url('./Facebook.svg');
            }
          }
        }
        &.cpap__product-share-popover__icon--twitter {
          &.is-visible {
            &:before {
              background-image: url('./X.png');
            }
          }
        }
        &.cpap__product-share-popover__icon--pinterest {
          &.is-visible {
            &:before {
              background-image: url('./Pinterest.png');
            }
          }
        }
        &.cpap__product-share-popover__icon--email {
          &.is-visible {
            &:before {
              background-image: url('./Email-2.svg');
            }
          }
        }
      }
    }
  }
}