@import "./../styles/index.scss";

.pin-new-content{
  margin: 0 auto;
  text-align: center;
  width: 300px;
  height: 390px;

  h1{
    margin-top: 35px;
    font-size: 17px;
    font-weight: bold;
  }

  > p {
    margin: 20px 74px 10px 74px;
    font-size: 12px;
  }

  .pin-new-code{
    margin: 20px auto 0;
    width: 180px;

    &.expand{
      .pin-code{
        margin-top: 40px;
      }
    }

    h2{
      margin-bottom: 0;
      text-align: left;
    }
  }

  button{
    bottom: 40px;
    transform: translateX(-50%);
    min-width: 80px;
    position: absolute;

    &.button-a{
      text-transform: none;
    }
  }
}

.pin-code{
  margin-top: 20px;
  position: relative;

  .styles_react-code-input-container__tpiKG{
    width: 180px !important;
    
    .styles_react-code-input__CRulA{
      input{
        border: none;
        border-radius: 0;
        font-family: 'NunitoSans';
        border-bottom: 3px solid #0091ff;
        margin-right: 17px;
        padding: 0;
        background-color: transparent;
    
        &:last-child{
          margin-right: 0;
        }
      }
    }
  }

  &.pin-code-status-error{
    .styles_react-code-input-container__tpiKG{
      .styles_react-code-input__CRulA{
        input{
          border-bottom: 3px solid #bf2626;
        }
      }
    }

    .error{
      bottom: -15px;
      color: #bf2626;
      left: 0;
      font-size: 11px;
      text-align: left;
      position: absolute;
    }
  }
}

/* THEME ----------------------------- */
@mixin themable($_THEME, $_COLOR_TEXT_POPUP_TITLE, $_COLOR_TEXT_POPUP_PARAGRAPH){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .pin-new-content{
      h1,h2{
        color: $_COLOR_TEXT_POPUP_TITLE;
      }
      p{
        color: $_COLOR_TEXT_POPUP_PARAGRAPH;
      }
    }
  }
}
  
@include themable($_THEME_LIGHT, $_COLOR_TEXT_POPUP_TITLE_LIGHT, $_COLOR_TEXT_POPUP_PARAGRAPH_LIGHT);
@include themable($_THEME_DARK, $_COLOR_TEXT_POPUP_TITLE_DARK, $_COLOR_TEXT_POPUP_PARAGRAPH_DARK);