/*
  === DESIGN SYSTEM SITEW ===
  -- Last update : 20/02/2020
  -- Zeplin link : https: //app.zeplin.io/project/5d839c30e66b9b8a0dbdfd9a/styleguide/components
*/

/*

  == COLORS ==

*/
$azure : #12a3eb;
$blueLow: #0e5285;
$warmPink : #ee5a73;
$brownGrey: #aeaeae;
$greyishBrown: #414141;
$darkIndigo: #091e2f;
$black: #000000;


/*

  == GENERAL ==

*/
a,
a:visited {
  color: $azure;
  text-decoration: none;

  &:hover {
    color: $blueLow; //TODO: confirmer
  }
}


/*

  == FONTS ==

  .-font1=>48px
  .-font2=>37px
  .-font3=>28px
  .-font4=>21px
  .-font4=>16px bold
  .-font5=>16px bold
  .-font6=>16px semi-bold
  .-font7=>16px normal
  .-font8=>14px normal
  .-font9=>14px light

*/
.-font1 {
  font-size: 48px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.75px;
  color: $blueLow;
}

.-font2 {
  font-size: 37px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: $black;
}

.-font3 {
  font-size: 28px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  color: $black;
}

.-font4 {
  font-size: 21px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  color: $black;
}

.-font5 {
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.25px;
  color: $black;
}

.-font6 {
  font-size: 16px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  color: $black;
}

.-font7 {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  color: $black;
}

.-font8 {
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  color: $black;
}

.-font9 {
  font-size: 14px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  text-align: center;
  color: $black;
}

.-defaultFont{ // Use on body
  font-size: 14px;
}
/*

  == BUTTONS ==

*/
.-whiteButton {
  border-radius: 10px;
  box-shadow: 0 10px 20px 0 rgba(9, 30, 47, 0.1);
  background-color: #ffffff;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  padding: 8px;
  color: $greyishBrown;
  font-size: 16px;
  @include transition(box-shadow .25s ease-in-out);

  &:hover {
    box-shadow: 0 15px 30px 0 rgba(9, 30, 47, 0.15);
    color: $greyishBrown;
  }
}


/*

  == TEXTBOXES ==

*/

.-textBox {
  border: 1px solid #cdcdcd;
  background-color: #fcfdfd;
  border-radius: 5px;
  font-size: 16px;
  padding: 5px 5px;
  &:focus,
  &:active {
    outline: none;

  }
  &:focus, &:active, &.-notEmpty {
    ~.__dynamicLabel {
      @include transform(translate(-40px, -30px));
    }
  }
}

.-withIcon {
  padding-left: 40px;
}
.-block {
  display: block;
  width: 100%;
}
.-dynamicLabel {
  margin-top: 30px !important;
}
.__dynamicLabel {
  position: absolute;
  top: 0;
  left: 40px;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  @include transition(transform .2s ease-in-out);
  @include transform(translate(0, 0));
}

/*

  == ERRORS ==

*/

.-hasError{
  .-textBox{
    border-color: $warmPink;
    ~svg * {
      stroke: $warmPink;
    }
  }
  .__dynamicLabel{
    color: $warmPink;
  }
}

.__error {
  text-align: left;
  color: $warmPink;
}
.-hasSuccess {
  .-textBox {
    border-color: $azure;

    ~svg {
      * {
        stroke: $azure;
      }
    }
  }

  .__dynamicLabel {
    color: $azure;
  }

}

/*

  == COLORS MODIFIERS ==

*/

.-blueLow {
  color: $blueLow;
}

.-ligthBlueBackground {
  background-color: #f6faff;
}


// TODO: Pas sûr !
.control-group {
  padding: 10px 0;
}