/***

FILE: app.scss

TABLE OF CONTENTS

1.- FONTS
 1.1.- Text
2.- CONTENT
3.- CONTROLS
 3.1.- Button
 3.2.- Input Text

***/

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

/* 1.1.- FONTS: Text
   ----------------------------- */

@font-face {
  font-family: "NunitoSans";
  src:url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-regular.eot);
  src:url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-regular.eot?#iefix) format("embedded-opentype"),
    url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-regular.woff) format("woff"),
    url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-regular.ttf) format("truetype"),
    url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-regular.svg) format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NunitoSans";
  src:url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-italic.eot);
  src:url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-italic.eot?#iefix) format("embedded-opentype"),
    url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-italic.woff) format("woff"),
    url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-italic.ttf) format("truetype"),
    url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-italic.svg) format("svg");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "NunitoSans";
  src:url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200.eot);
  src:url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200.eot?#iefix) format("embedded-opentype"),
    url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200.woff) format("woff"),
    url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200.ttf) format("truetype"),
    url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200.svg) format("svg");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "NunitoSans";
  src:url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200italic.eot);
  src:url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200italic.eot?#iefix) format("embedded-opentype"),
    url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200italic.woff) format("woff"),
    url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200italic.ttf) format("truetype"),
    url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200italic.svg) format("svg");
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: "NunitoSans";
  src:url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300.eot);
  src:url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300.eot?#iefix) format("embedded-opentype"),
    url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300.woff) format("woff"),
    url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300.ttf) format("truetype"),
    url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300.svg) format("svg");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "NunitoSans";
  src:url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300italic.eot);
  src:url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300italic.eot?#iefix) format("embedded-opentype"),
    url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300italic.woff) format("woff"),
    url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300italic.ttf) format("truetype"),
    url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300italic.svg) format("svg");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "NunitoSans";
  src:url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600.eot);
  src:url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600.eot?#iefix) format("embedded-opentype"),
    url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600.woff) format("woff"),
    url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600.ttf) format("truetype"),
    url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600.svg) format("svg");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "NunitoSans";
  src:url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600italic.eot);
  src:url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600italic.eot?#iefix) format("embedded-opentype"),
    url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600italic.woff) format("woff"),
    url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600italic.ttf) format("truetype"),
    url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600italic.svg) format("svg");
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "NunitoSans";
  src:url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700.eot);
  src:url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700.eot?#iefix) format("embedded-opentype"),
    url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700.woff) format("woff"),
    url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700.ttf) format("truetype"),
    url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700.svg) format("svg");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "NunitoSans";
  src:url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700italic.eot);
  src:url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700italic.eot?#iefix) format("embedded-opentype"),
    url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700italic.woff) format("woff"),
    url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700italic.ttf) format("truetype"),
    url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700italic.svg) format("svg");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "NunitoSans";
  src:url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800.eot);
  src:url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800.eot?#iefix) format("embedded-opentype"),
    url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800.woff) format("woff"),
    url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800.ttf) format("truetype"),
    url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800.svg) format("svg");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "NunitoSans";
  src:url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800italic.eot);
  src:url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800italic.eot?#iefix) format("embedded-opentype"),
    url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800italic.woff) format("woff"),
    url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800italic.ttf) format("truetype"),
    url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800italic.svg) format("svg");
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: "NunitoSans";
  src:url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900.eot);
  src:url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900.eot?#iefix) format("embedded-opentype"),
    url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900.woff) format("woff"),
    url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900.ttf) format("truetype"),
    url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900.svg) format("svg");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "NunitoSans";
  src:url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900italic.eot);
  src:url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900italic.eot?#iefix) format("embedded-opentype"),
    url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900italic.woff) format("woff"),
    url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900italic.ttf) format("truetype"),
    url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900italic.svg) format("svg");
  font-weight: 900;
  font-style: italic;
}

h1{
  font-size: 20px;
  font-weight: 400;
}

h2{
  font-size: 12px;
  font-weight: 600;
}

p{
  font-size: 12px;
  font-weight: 300;
}

/* 1.2.- FONTS: Icon
   ----------------------------- */
@font-face {
  font-family: 'icomoon';
  src:  url(#{$_PATH_TO_FONTS}/icon.eot?y4ei23);
  src:  url(#{$_PATH_TO_FONTS}/icon.eot?y4ei23#iefix) format('embedded-opentype'),
    url(#{$_PATH_TO_FONTS}/icon.ttf?y4ei23) format('truetype'),
    url(#{$_PATH_TO_FONTS}/icon.woff?y4ei23) format('woff'),
    url(#{$_PATH_TO_FONTS}/icon.svg?y4ei23#icomoon) format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-file-default:before {
  content: "\e92d";
}

.icon-exit:before {
  content: "\e937";
}

/* 2.- CONTENT
   ----------------------------- */
*{
  font-family: NunitoSans;
}

html, html body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

#root, .wrapper-out{
  height: 100%;
  width: 100%;
}

.wrapper{
  background-color: white;
  display: flex;
  height: 100%;
  width: 100%;

  .view-controller-container{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;

    header{
      display: flex;
      height: 60px;
      justify-content: space-between;
      width: 100%;

      &.invisible{
        button.back-button{
          visibility: hidden;
        }
      }

      .button-section{
        align-items: center;
        display: flex;

        button.back-button{
          margin-left: 10px;
          height: 30px;
          width: 40px;
          background: transparent;
  
          svg{
            fill: #0091ff;
            height: 100%;
            width: 100%;
          }
        }
      }
      

      .criptext-logo{
        background-image: url(./#{$_PATH_TO_IMAGES}/criptext-logo.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 80% 100%;
        width: 130px;
        height: 100%;
      }
    }

    section{
      height: calc(100% - 60px);
      width: 100%;
    }
  }
  
}

/* 3.- CONTROL
   ----------------------------- */
.pin-code{
  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;
    
        &: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: -20px;
      color: #bf2626;
      left: 0;
      font-size: 11px;
      text-align: left;
      position: absolute;
    }
  }
}