.nps-add-to-subscription-wrapper {
    .nps-add-to-subscription-button {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #E2E2E2;
        font-size: 12px;
        font-weight: 400;
        fill: var(--e-global-color-7d0d9e1);
        color: var(--e-global-color-7d0d9e1);
        border-radius: 4px;
        padding: 6px 8px 5px;
        transition: background-color 0.3s, color 0.3s;
        line-height: 1;

        &:hover {
            background-color: var(--e-global-color-accent);
            color: var(--e-global-color-a4952ee);
        }

        &::before {
            font-family: "woodmart-font";
            font-weight: 400;
            content: "\f106";
            font-size: var(--wd-action-icon-size, 1.1em);
            transition: opacity .15s ease;
            margin-inline-end: .3em;
        }

        &.added::before {
            content: "\f107";
        }

        &.loading::before {
            opacity: 0;
            pointer-events: none;
        }

        &.loading::after {
            position: absolute;
            top: calc(50% - 0.5em);
            left: 8px;
            opacity: 1;
            content: "";
            width: 1em;
            height: 1em;
            border: 2px solid rgba(0, 0, 0, 0.2);
            border-top-color: var(--color-gray-900);
            border-radius: 50%;
            animation: wd-rotate 0.45s linear infinite;
            z-index: 2;
        }
    }
}