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

#non-criptext-container{
  align-items: center;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;

  .non-criptext-content {
    font-family: NunitoSans;
    height: 350px;
    margin: 0 auto;
    position: relative;
    width: 232px;
    z-index: 1;
    display: flex;

    section{
      align-items: center;
      border-radius: 5px;
      display: flex;
      height: 100%;
      width: 100%;
      padding: 0px 34px 0px 40px;

      .content {
        display: flex;
        flex-direction: column;
        height: 266px;
        justify-content: space-between;
        width: 100%;

        .non-criptext-title {
          text-align: center;
          font-weight: bold;
          font-size: 14px;
          line-height: 31px;
          margin-bottom: 22px;
        }
  
        .non-criptext-label {
          display: flex;
          flex-grow: 1;
          flex-direction: row;
          font-size: 13px;
          line-height: 18px;
          margin-bottom: 8px;
          .text {
            flex-grow: 7;
            margin: 0px;
          }
          .switch {
            flex-grow: 1;
            margin: 0px;
          }
        }

        .non-criptext-description {
          font-size: 11px;
          margin-top: 5px;
        }

        .non-criptext-form {
          flex-grow: 1;
          height: 74px;
          margin-bottom: 22px;

          input {
            width: 97%;
            padding-left: 5px;
            height: 21px;
            border: none;
            font-size: 13px;
            margin-top: 16%;
            &:focus {
              outline: none;
              border-bottom: 1px solid #0091ff;
            }
            &::placeholder {
              color: #9b9999;
            }
          }

          .icon-show, .icon-not-show {
            position: relative;
            left: 148px;
            top: -20px;
            float: left;
          }

          .error-password-message{
            font-size: 10px;
            position: relative;
            top: -4px;
            left: -10px;
          }
        }

        .non-criptext-note {
          flex-grow: 1;
          height: 74px;
          font-size: 12px;
          margin-top: 20px;
          margin-bottom: 25px;
        }

        .non-criptext-buttons {
          display: flex;
          flex-direction: row-reverse;
          margin-bottom: auto;
          position: relative;
          bottom: 0%;

          button {
            width: 70px;
            height: 27px;
            border-radius: 14px;
            margin-left: 10px;
            font-weight: 600;
            &:disabled {
              opacity: 0.5;
            }
            &.button-send {
              background-color: #0091ff;
              color: #fff;
            }
            &.button-cancel {
              background-color: #fff;
              color: #000;
            }
          }
        }
      }
    }
  }

  .non-criptext-overlay{
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
  }
}

/*  THEME
----------------------------- */
@mixin themable($_THEME, $_BACKGROUND_COLOR_POPUP, $_BORDER_COLOR_POPUP_INPUT, $_COLOR_TEXT_POPUP_TITLE, $_COLOR_TEXT_POPUP_SUBTITLE, $_COLOR_TEXT_POPUP_PARAGRAPH, $_COLOR_TEXT_POPUP_BUTTON_CANCEL, $_COLOR_TEXT_POPUP_ERROR_MESSAGE){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {

    #non-criptext-container{
      .non-criptext-content {
        section {
          background-color: $_BACKGROUND_COLOR_POPUP;

          .content {
            .non-criptext-title {
              color: $_COLOR_TEXT_POPUP_TITLE;
            }
            .non-criptext-label > .text {
              color: $_COLOR_TEXT_POPUP_PARAGRAPH;
            }
            .non-criptext-description {
              color: $_COLOR_TEXT_POPUP_SUBTITLE;
            }
            .non-criptext-form {
              input {
                color: $_COLOR_TEXT_POPUP_PARAGRAPH;
                background-color: $_BACKGROUND_COLOR_POPUP;
                border-bottom: 1px solid $_BORDER_COLOR_POPUP_INPUT;
                &:focus {
                  border-bottom: 1px solid #0091ff;
                }
                &::placeholder {
                  color: $_COLOR_TEXT_POPUP_SUBTITLE;
                }
              }
              .icon-show, .icon-not-show {
                color: $_COLOR_TEXT_POPUP_SUBTITLE;
              }
              .error-password-message {
                color: $_COLOR_TEXT_POPUP_ERROR_MESSAGE;
                &.hidden {
                  color: $_BACKGROUND_COLOR_POPUP;
                }
              }
            }
            .non-criptext-note {
              color: $_COLOR_TEXT_POPUP_PARAGRAPH;
            }
            .non-criptext-buttons {
              button {
                &.button-cancel {
                  background-color: $_BACKGROUND_COLOR_POPUP;
                  color: $_COLOR_TEXT_POPUP_BUTTON_CANCEL;
                }
              }
            }
          }
        }
      }
    }
  }
}

@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_POPUP_LIGHT, $_BORDER_COLOR_POPUP_INPUT_LIGHT, $_COLOR_TEXT_POPUP_TITLE_LIGHT, $_COLOR_TEXT_POPUP_SUBTITLE_LIGHT, $_COLOR_TEXT_POPUP_PARAGRAPH_LIGHT, $_COLOR_TEXT_POPUP_BUTTON_CANCEL_LIGHT, $_COLOR_TEXT_POPUP_ERROR_MESSAGE_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_POPUP_DARK, $_BORDER_COLOR_POPUP_INPUT_DARK, $_COLOR_TEXT_POPUP_TITLE_DARK, $_COLOR_TEXT_POPUP_SUBTITLE_DARK, $_COLOR_TEXT_POPUP_PARAGRAPH_DARK, $_COLOR_TEXT_POPUP_BUTTON_CANCEL_DARK, $_COLOR_TEXT_POPUP_ERROR_MESSAGE_DARK);