// ============================================================================
// :: Authentication
// ============================================================================
/**
 * This component groups a few very authentication-focused elements. Since it's a vital part of the experience, it deserves its own custom component
 */

// ============================================================================
// :: Root
// ============================================================================
// .m-authentication {}

// ============================================================================
// :: Elements
// ============================================================================

.m-authentication__title {
  text-align: center;

  @include respond-at($breakpoint-tablet-default) {
    text-align: left;
  }
}

.m-authentication__code {
  padding: 2rem;
  margin-top: 2rem;

  border: $border-width-base solid $primary-color-base;
  border-radius: $border-radius-base;

  // styling the icon
  &::before {
    font-size: $icon-size-2x-large;

    color: $primary-color-base;
  }
}

.m-authentication__input {
  margin: 0 1rem;

  letter-spacing: 0.5rem;

  max-width: 75%;

  border: none;
}