.subscription-active-with-payment-link {
  background: var(--o3-color-palette-ft-grey);
  padding: var(--o3-spacing-s) var(--o3-spacing-s) var(--o3-spacing-m);
  color: var(--o3-color-palette-white);
  display: flex;
  flex-direction: column;
}

.subscription-active-with-payment-link--responsive {
  @include oGridRespondTo($from: M) {
    padding: var(--o3-spacing-s) 50px var(--o3-spacing-m);
  }
}

.subscription-active-with-payment-link__header {
  display: flex;
  align-items: center;
}

.subscription-active-with-payment-link__icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: var(--o3-color-palette-ft-pink);
  border-radius: 50%;
  margin-right: var(--o3-spacing-2xs);
}

.subscription-active-with-payment-link__icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 6px;
  margin-top: 15px;
  /* Set the icon colour, In this case match the
   current foreground text colour. */
  background-color: var(--o3-color-palette-ft-grey);
  /* Mask the square with an Origami icon. */
  mask-image: var(--o3-icon-tick);
  mask-repeat: no-repeat;
  mask-size: contain;
}

.subscription-active-with-payment-link__title {
  margin: 0;

  font-family: var(--o3-type-title-md-font-family);
  font-size: var(--o3-type-title-md-font-size);
  font-weight: var(--o3-type-title-md-font-weight);
  line-height: var(--o3-type-title-md-line-height);
}

.subscription-active-with-payment-link__description {
  font-family: var(--o3-type-body-base-font-family);
  font-size: var(--o3-type-body-base-font-size);
  font-weight: var(--o3-type-body-base-font-weight);
  line-height: var(--o3-type-body-base-line-height);

  color: var(--o3-color-palette-white);
}

.subscription-active-with-payment-link__label {
  font-family: var(--o3-type-body-base-font-family);
  font-size: var(--o3-type-body-base-font-size);
  font-weight: var(--o3-type-body-base-font-weight);
  line-height: var(--o3-type-body-base-line-height);

  color: var(--o3-color-palette-ft-pink);
  margin-bottom: var(--o3-spacing-4xs);
}

.subscription-active-with-payment-link__payment-box {
  display: flex;
  align-items: center;
  background: var(--o3-color-palette-ft-grey);
  overflow: hidden;
  gap: var(--o3-spacing-4xs);
  width: 100%;
}

.subscription-active-with-payment-link__input {
  flex-grow: 1;
  background: var(--o3-color-palette-white-60);
  border: none;
  box-sizing: border-box;
  color: var(--o3-color-palette-black-60);

  font-family: var(--o3-type-body-base-font-family);
  font-size: var(--o3-type-body-base-font-size);
  font-weight: var(--o3-type-body-base-font-weight);
  line-height: var(--o3-type-body-base-line-height);

  padding: 10px var(--o3-spacing-2xs);
  text-overflow: ellipsis;
  height: 40px;
}

.subscription-active-with-payment-link__button {
  font-family: var(--o3-type-body-base-font-family);
  font-size: var(--o3-type-body-base-font-size);
  font-weight: var(--o3-type-body-base-font-weight);
  line-height: var(--o3-type-body-base-line-height);
  transition: background 0.2s ease-in-out;
  padding: 10px 20px;
  height: 40px;
}

.subscription-active-with-payment-link__button.subscription-active-with-payment-link__button--copied {
  background-color: #fdd9c1;; // Fallback for browsers that don’t support color-mix()
  background-color: color-mix(in srgb, var(--o3-color-palette-ft-pink) 80%, var(--o3-color-palette-white) 20%);
}

.subscription-active-with-payment-link__button.subscription-active-with-payment-link__button--ft-pink{
  background-color: var(--o3-color-palette-ft-pink);
  color: var(--o3-color-palette-ft-grey);
}

.subscription-active-with-payment-link__button.subscription-active-with-payment-link__button--ft-pink:hover{
  background-color:#caa68e;
  color: var(--o3-color-palette-ft-grey);
}