.entity-attribute-password
  position: relative

  .password
    &.repeat
      border-top: 1px solid $lightest-gray

  .validationHelper
    position: absolute
    z-index: 3
    top: -235px
    left: 205px
    pointer-events: none
    opacity: 0
    transform: translate3d(0, 10px, 0)
    transition: opacity 0.3s, transform 0.3s
    transition-delay: 0s
    width: calc(100% - 225px)
    height: 225px
    max-width: 340px
    background-color: white
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.15)
    border-radius: 5px

    h3
      font-size: 0.7rem
      line-height: 1.6
      color: rgba(white, 0.5)
      font-weight: 100
      margin: 0
      background-color: lighten($darkerBlue, 5%)
      padding: 12px 20px
      border-radius: 5px 5px 0 0
      text-transform: uppercase

    .success
      +flex(center, flex-end)
      position: absolute
      bottom: 0
      left: 0
      width: 100%
      height: 100%
      opacity: 0
      transition: opacity 0.4s
      border-radius: 5px
      background:
        image: url("#{$baseImagePath}/icons/success.gif")
        position: top center
        repeat: no-repeat
        color: #12c06a

      p
        margin: 0
        opacity: 0.6
        font-size: 0.8rem
        letter-spacing: 0.8px
        text-transform: uppercase

    .requirements
      padding: 10px 15px

      p
        font-size: 0.7rem
        color: rgba($light-gray, 0.65)
        line-height: 0.85

        span
          display: inline-block
          position: relative
          padding: 0 5px

          &:after
            content: ''
            position: absolute
            top: 4px
            left: 0
            display: block
            width: 100%
            height: 1px
            transform: scaleX(0)
            transform-origin: 0 50%
            background-color: $medium-gray
            transition: transform 0.6s

        &.info
          color: $medium-gray
          font-weight: bold
          margin-bottom: 1rem
          padding: 0 5px

        &.invalid
          color: $neonRed
          opacity: 0.8

        &.valid
          span
            &:after
              transform: scaleX(1)

    &:after
      content: ''
      position: absolute
      width: 0
      height: 0
      border: 0 solid transparent
      border-left-width: 15px
      border-right-width: 15px
      border-top: 15px solid white
      left: calc(50% - 7.5px)
      bottom: -15px
      transition: border 0.4s

    &.active
      opacity: 1
      transform: translate3d(0, 0, 0)
      pointer-events: all

    &.valid
      opacity: 0
      transition-delay: 4s
      pointer-events: none

      &:after
        border-top-color: #12c06a

      .success
        opacity: 1
        z-index: 4