@import '../variables';
@import '../config/import';

// Authentication Card in Feed
.authentication-feed {
  &__image {
    border-radius: var(--radius);
    width: var(--su-8);
    height: var(--su-8);
    margin-bottom: var(--su-2);
    @media (min-width: $breakpoint-s) {
      height: 80px;
      width: 80px;
      margin-right: var(--su-7);
    }
  }
}

.authentication-widget {
  &__container {
    padding: var(--su-4);
  }

  &__image-container {
    width: var(--su-8);
    height: var(--su-8);
    margin-bottom: var(--su-2);
  }

  &__image {
    border-radius: var(--radius);
    transform: rotate(-10deg);
    height: auto;
    width: 100%;
  }

  &__title {
    color: var(--card-color);
    font-size: var(--fs-xl);
    line-height: var(--lh-tight);

    @media (min-width: $breakpoint-s) {
      font-size: var(--fs-2xl);
    }
  }

  &__description {
    color: var(--card-color-secondary);
    margin-bottom: var(--su-4);
  }

  &__actions {
    display: grid;
    grid-gap: var(--su-1);
    width: 100%;

    @media (min-width: $breakpoint-s) {
      display: flex;
      flex-direction: column;
      justify-self: center;
    }
  }
}

// Registration View
.registration {
  border-radius: unset;
  padding: var(--su-4);

  @media (min-width: $breakpoint-s) {
    border-radius: var(--radius);
    padding: var(--su-8);
    padding-top: var(--su-6);
    margin: 0 auto;
    width: $breakpoint-s;
  }

  &__button-container {
    border: 1px solid var(--form-border);

    a {
      color: var(--label-primary);
    }

    .js-focus-visible &.focus-visible:focus,
    &:is(label):focus-within {
      box-shadow: var(--focus-ring);
      outline: 0;
      z-index: var(--z-elevate);
    }

    &:hover {
      border: 1px solid var(--form-border);
      background: var(--card-tertiary-bg);
    }
  }

  &__logo {
    width: auto;
    height: 48px;
  }

  &__content {
    margin-bottom: var(--su-6);
    text-align: center;
  }

  &__title {
    margin-top: var(--su-4);
    color: var(--card-color);
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);

    @media (min-width: $breakpoint-s) {
      font-size: var(--fs-3xl);
    }
  }

  &__description {
    margin-top: var(--su-1);
    color: var(--card-color-secondary);
    font-size: var(--fs-base);
  }

  &__hr-container {
    position: relative;
    text-align: center;
    margin: var(--su-7) 0px;
  }

  &__hr {
    height: 1px;
    margin: var(--su-6) 0px;
    background-color: var(--divider);
    border: none;
  }

  &__hr-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 0 var(--su-4);
    color: var(--grey-700);
    text-align: center;
    font-size: var(--fs-s);
  }

  &__actions-providers {
    margin-bottom: var(--su-4);
    display: grid;
    grid-gap: var(--su-3);
    width: 100%;
  }

  &__footer {
    font-size: var(--fs-s);
    font-family: var(--ff-monospace);
    padding-top: var(--su-4);
    padding-bottom: var(--su-4);
    text-align: center;
    color: var(--base-60);
  }

  &__footer-content {
    display: flex;
    justify-content: center;

    svg {
      margin-left: var(--su-2);
    }
  }

  &__error-notice {
    color: var(--accent-danger-darker);
    font-size: var(--fs-base);
    padding: var(--su-2);
    margin: var(--su-2);

    & ul {
      color: $black;
    }

    @media (min-width: $breakpoint-s) {
      margin: var(--su-4) auto 0;
      width: $breakpoint-s;
    }
  }
}
