<commit_before>// Authentication: login/register
//
// Markup: ../kss_styleguide/markup/components.authentication.html
//
// Styleguide Components.Authentication


.c-authentication {
  position: relative;
  perspective: 1000px; /* entire container, keeps perspective. */
  display: block;
  width: 100%;
  max-width: 465px;
  height: 345px;
  margin: 0 auto;
  padding: 10px;

  &.state-register .c-authentication__inner { transform: rotateY(180deg); }
}

.c-authentication__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: 0.8s cubic-bezier(0.65, 0, 0.35, 1);

  .c-authentication--vertical & { transform-origin: 100% 162.5px; } /* half height of component minus padding */

  .c-authentication--vertical.state-register & { transform: rotateX(180deg); }
}

/* hide back of pane during swap */
.c-authentication__back,
.c-authentication__front {
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  display: block;
  width: calc(100% - 65px);
  height: 100%;
}

/* front pane, placed above back */
.c-authentication__front { z-index: 10; }

/* back, initially hidden pane */
.c-authentication__back {
  transform: rotateY(180deg);

  .c-authentication--vertical & { transform: rotateX(180deg); }
}

.c-authentication__fields,
.c-authentication__submit {
  position: relative;
  display: block;
  width: 100%;
  height: 175px;

  @include mq(min-w, 400px) { height: 250px; }
}

.c-authentication__fields {
  z-index: 10;
  box-shadow: 5px 10px 100px 5px rgba($black-100, 0.2);
  background: $white;
}

.c-authentication__fields label {
  position: relative;
  display: block;
  width: 100%;
  height: 50%;

  &:first-child { border-bottom: 1px solid rgba($black, 0.1); }
}

.c-authentication__fields input {
  z-index: 10;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 10px;
  background: transparent;
  text-align: center;
  text-transform: uppercase;

  &::placeholder {
    color: $black;
    transition: color 0.2s;
  }

  &:focus::placeholder { color: rgba($black, 0.3); }
}

.c-authentication__submit {
  overflow: hidden;
  z-index: 0;
  top: -120px;
  left: 65px;<commit_msg>add feedback message styling<commit_after>// Authentication: login/register
//
// Markup: ../kss_styleguide/markup/components.authentication.html
//
// Styleguide Components.Authentication


.c-authentication {
  position: relative;
  perspective: 1000px; /* entire container, keeps perspective. */
  display: block;
  width: 100%;
  max-width: 465px;
  height: 345px;
  margin: 0 auto;
  padding: 10px;

  &.state-register .c-authentication__inner { transform: rotateY(180deg); }
}

.c-authentication__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: 0.8s cubic-bezier(0.65, 0, 0.35, 1);

  .c-authentication--vertical & { transform-origin: 100% 162.5px; } /* half height of component minus padding */

  .c-authentication--vertical.state-register & { transform: rotateX(180deg); }
}

/* hide back of pane during swap */
.c-authentication__back,
.c-authentication__front {
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  display: block;
  width: calc(100% - 65px);
  height: 100%;
}

/* front pane, placed above back */
.c-authentication__front { z-index: 10; }

/* back, initially hidden pane */
.c-authentication__back {
  transform: rotateY(180deg);

  .c-authentication--vertical & { transform: rotateX(180deg); }
}

.c-authentication__fields,
.c-authentication__submit {
  position: relative;
  display: block;
  width: 100%;
  height: 175px;

  @include mq(min-w, 400px) { height: 250px; }
}

.c-authentication__fields {
  z-index: 10;
  box-shadow: 5px 10px 100px 5px rgba($black-100, 0.2);
  background: $white;
}

.c-authentication__fields label {
  position: relative;
  display: block;
  width: 100%;
  height: 50%;

  &:first-child { border-bottom: 1px solid rgba($black, 0.1); }
}

.c-authentication__fields input {
  z-index: 10;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 10px;
  background: transparent;
  text-align: center;
  text-transform: uppercase;

  &::placeholder {
    color: $black;
    transition: color 0.2s;
  }

  &:focus::placeholder { color: rgba($black, 0.3); }
}

.c-authentication__feedback {
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 5px;
  font-size: em(12px);
}

.c-authentication__submit {
  overflow: hidden;
  z-index: 0;
  top: -120px;
  left: 65px;
{'fraction_non_alphanumeric': 0.14587876144788486, 'fraction_numerical': 0.05407762756214566, 'mean_word_length': 3.6427125506072873, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4664320', 'n_tokens_mistral': 1871, 'n_tokens_neox': 1608, 'n_words': 389}