@import '@financial-times/o-social-follow/main';
@import '@financial-times/o-grid/main';

/***
 * This component has been created for a trial feature for the FT Edit app to be used inside
 * next-subscribe. This can be removed after the trial. The trial is beginning May 2024, please
 * reach out to light-apps channel if we dont reach out first, as to when this can be deleted.
 */

@include oSocialFollow($opts: ('icons': ('twitter',
      'facebook',
      'linkedin',
      'instagram',
    ),
  ));

@mixin ncfConfirmation() {
  &__confirmation {
    &--message {
      max-width: 304px;
      margin: auto;
      margin-bottom: 12px;
    }

    &--desktop {
      @include oGridRespondTo($until: M) {
        display: none;
      }
    }

    &--mobile {
      @include oGridRespondTo(M) {
        display: none;
      }
    }

    &__professional-subscription-check-banner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--o3-spacing-4xs);
      padding: var(--o3-spacing-s) var(--o3-spacing-2xs);
      padding-left: calc(var(--o3-spacing-xl) + var(--o3-spacing-5xs));
      background-color: var(--o3-color-use-case-page-inverse-background);
      color: var(--o3-color-use-case-body-inverse-text);
      margin: var(--o3-spacing-m) 52px; // Using hardcoded values to allow it align with icon since icon size has changed to 24px and using --o3-spacing-xl breaks the design

      @include oGridRespondTo($until: M) {
        align-items: stretch;
        padding: var(--o3-spacing-2xs);
        margin: var(--o3-spacing-m) 0px;
      }

      &-header {
        flex: 1;
      }

      &-title {
        text-indent: calc(-1 * (var(--o3-spacing-m) + var(--o3-spacing-4xs)));
        margin: 0px;
        font-size: var(--o3-font-size-metric2-1);
        line-height: var(--o3-font-lineheight-metric2-1);
        font-weight: var(--o3-font-weight-semibold);


        @include oGridRespondTo($until: M) {
          display: flex;
          align-items: center;
          text-indent: 0px;
          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);


        }

        &::before {
          display: inline-block;
          width: 24px;
          height: 24px;
          /* Set the icon colour, In this case match the
                     current foreground text colour. */
          background-color: var(--o3-color-palette-white);
          /* Mask the square with an Origami icon. */
          mask-image: var(--o3-icon-info);
          mask-repeat: no-repeat;
          mask-size: contain;
          content: '';
          vertical-align: middle;
          margin-right: 10px;
          margin-left: 6px;

          @include oGridRespondTo($until: M) {
            flex-shrink: 0;
            margin: 0 var(--o3-spacing-5xs) 0 0;
          }
        }
      }

      &-text {
        margin: var(--o3-spacing-4xs) 0px 0px;
        font-family: var(--o3-type-detail-font-family);
        font-size: var(--o3-type-detail-font-size);
        font-weight: var(--o3-type-detail-font-weight);
        line-height: var(--o3-type-detail-line-height);

        &--bold {
          font-weight: var(--o3-font-weight-semibold);
        }
      }

      &-checklist {
        list-style-type: none;
        list-style-position: outside;
        padding: 0px;
        margin: 0px;
        font-family: var(--o3-type-detail-font-family);
        font-size: var(--o3-type-detail-font-size);
        font-weight: var(--o3-type-detail-font-weight);
        line-height: var(--o3-type-detail-line-height);


        &-item {
          margin: var(--o3-spacing-5xs) 0px;
          border-bottom: 1px solid #858b95; // Fallback for browsers that don’t support color-mix()
          border-bottom: 1px solid color-mix(in srgb, var(--o3-color-palette-white-80) 20%, var(--o3-color-palette-slate));

          &:last-child {
            border-bottom: none;
          }

          &::before {
            display: inline-block;
            width: 19px;
            height: 19px;
            margin: 6px;
            /* Set the icon colour, In this case match the
                         current foreground text colour. */
            background-color: var(--o3-color-palette-mint);
            /* Mask the square with an Origami icon. */
            mask-image: var(--o3-icon-tick);
            mask-repeat: no-repeat;
            mask-size: contain;
            vertical-align: middle;
            content: '';
          }
        }
      }
    }

    &--links {
      display: grid;
      grid-template-rows: 1fr 1fr;
      gap: var(--o3-spacing-2xs);
      margin-top: var(--o3-spacing-s);

      @include oGridRespondTo(M) {
        grid-template-rows: unset;
        grid-template-columns: 1fr 1fr;
        gap: var(--o3-spacing-m);
      }
    }

    &--socials {
      @include oGridRespondTo(M) {
        padding: var(--o3-spacing-s) var(--o3-spacing-2xs);
      }
    }

    &--badges {
      @include oGridRespondTo($until: M) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--o3-spacing-s);
        margin: auto;
        max-width: 256px;
      }
    }

    &--app-badges {
      @include oGridRespondTo($until: M) {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
    }

    &--alerts {
      display: flex;
      flex-direction: column;
      padding: 24px 20px;
      background-color: var(--o3-color-palette-white-60);

      a {
        color: var(--o3-color-palette-black-90);
        border-color: currentColor;
        position: sticky;
        top: 100vh;
      }
    }

    &--finish {
      display: flex;
      flex-direction: column;
      margin: 48px auto 0;
      width: 100%;

      @include oGridRespondTo(M) {
        max-width: 260px;
      }
    }

    &--finish-article-read {
      display: flex;
      margin: 12px auto 0px;
      width: 100%;

      @include oGridRespondTo(M) {
        max-width: 260px;
      }
    }
  }
}

.ncf-icon::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
}

.ncf-icon--myft::before {
  margin-left: 0.5rem;
  height: 1rem;
  width: 3rem;
  background-image: url('https://images.ft.com/v3/image/raw/ftlogo-v1%3Abrand-myft?format=svg&source=n-conversion-forms&tint=33302E,33302E&width=28&height=16');
}

.ncf-icon--android::before {
  height: 40px;
  width: 136px;
  background-image: url('https://images.ft.com/v3/image/raw/app-badge-v1%3Aandroid?source=n-conversion-forms');
}

.ncf-icon--apple::before {
  height: 40px;
  width: 136px;
  background-image: url('https://images.ft.com/v3/image/raw/app-badge-v1%3Aapple?format=svg&source=n-conversion-forms');
}