.proceed-with-payment-link {
  background: var(--o3-color-palette-ft-grey);
  padding: 24px;
  color: var(--o3-color-palette-white);
  display: flex;
  flex-direction: column;

  @include oGridRespondTo($from: M) {
    padding: var(--o3-spacing-s) var(--o3-spacing-s) var(--o3-spacing-m);
  }
}
.proceed-with-payment-link.o-forms-field {
  color: var(--o3-color-use-case-body-inverse-text);
}

.proceed-with-payment-link__heading {
  margin: 0px;
  margin-bottom: var(--o3-spacing-5xs);
  font-weight: var(--o3-font-weight-regular);
}

.proceed-with-payment-link__description {
  color: var(--o3-color-palette-white);
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
}

.proceed-with-payment-link__list {
  list-style: none;
  padding: 0;
}

.proceed-with-payment-link__list-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--o3-spacing-4xs);
  flex-wrap: nowrap;
}

.proceed-with-payment-link__icon {
  width: 15px;
  height: 15px;
  /* Set the icon colour, In this case match the
   current foreground text colour. */
  background-color: var(--o3-color-palette-ft-pink);
  /* Mask the square with an Origami icon. */
  mask-image: var(--o3-icon-tick);
  mask-repeat: no-repeat;
  mask-size: contain;
  margin: 6px;
  flex-shrink: 0;
  min-width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.proceed-with-payment-link__list-item-text {
  flex-grow: 1;
}

.proceed-with-payment-link__actions {
  margin-top: var(--o3-spacing-4xs);

  button {
    color: var(--o3-color-palette-ft-grey);
    padding: var(--o3-spacing-3xs) var(--o3-spacing-s);
    width: 100%;
    background-color: var(--o3-color-palette-ft-pink);
  }

  button:hover {
    background-color: #caa68e; // 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-black));
  }
}
.proceed-with-payment-link__actions button.proceed-with-payment-link__button{
  background-color: var(--o3-color-palette-ft-pink);
  color: var(--o3-color-palette-ft-grey);
}
.proceed-with-payment-link__actions button.proceed-with-payment-link__button:hover{
  background-color: #caa68e; // 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-black));
  color: var(--o3-color-palette-ft-grey);
}