/* TODO(cyrille): Make this file sassier. */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Lato, Helvetica;
}

/* We do most of the styling as inline styles using React. Only the text that we render
via the Markdown component is easier to be styled via classic CSS */
h2, h3 {
  margin-top: 3em;
}

h2+h3 {
  margin-top: 1em;
}

input, select, textarea {
  border: solid 1px $colors-SILVER;
}

div:focus, input:focus, select:focus, button:focus, a:focus, textarea:focus {
  outline: none;
}

.keyboard-focus button:focus, .keyboard-focus a:focus, .keyboard-focus select:focus,
.keyboard-focus textarea:focus, .keyboard-focus input:focus {
  outline: solid 2px;
}

input:hover, select:hover, textarea:hover {
  border-color: $colors-COOL_GREY;
}

input:focus, select:focus, textarea:focus {
  border-color: $colors-BOB_BLUE;
}

.no-hover input:hover, .no-hover select:hover, .no-hover textarea:hover,
.no-focus input:focus, .no-focus select:focus, .no-focus textarea:focus {
  border-color: $colors-SILVER;
}

.marked-invalid input, .marked-invalid select {
  border-color: $colors-RED_PINK;
}

.marked-invalid .algolia-autocomplete input.aa-input {
  border-color: $colors-RED_PINK;
}

* {
  box-sizing: border-box;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -moz-appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

input {
  letter-spacing: inherit;
  word-spacing: inherit;
}

button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  padding: 0;
  text-align: left;
  word-spacing: inherit;
}

button.login.google-login {
  background: $colors-BRAND_GOOGLE;
  padding: 7px 18px 7px 10px;

  &:focus-visible {
    box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 5px $colors-BRAND_GOOGLE;
  }
}

button.facebook-login {
  background: $colors-BRAND_FACEBOOK;

  &:focus-visible {
    box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 5px $colors-BRAND_FACEBOOK;
  }
}

button.pe-connect-login {
  background: $colors-BRAND_POLE_EMPLOI;

  &:focus-visible {
    box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 5px $colors-BRAND_POLE_EMPLOI;
  }
}

button.linkedin-login {
  background: $colors-BRAND_LINKED_IN;

  &:focus-visible {
    box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 5px $colors-BRAND_LINKED_IN;
  }
}

button.login:hover {
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
}

button.login:disabled {
  opacity: .7;
}

button.login {
  border: none;
  border-radius: 100px;
  color: #fff;
  font-size: 14px;
  height: 41px;
  letter-spacing: 0.4px;
  margin-bottom: 15px;
  padding: 7px 18px;
  text-align: left;
  transition: background-color 450ms cubic-bezier(0.18, 0.71, 0.4, 0.82) 0ms;
  width: 265px;
}

button.login .fa {
  display: inline-block;
  font-size: 24px;
  margin-right: 18px;
  text-align: center;
  vertical-align: middle;
  width: 18px;
}


/* Tooltip from http://www.w3schools.com/howto/howto_css_tooltip.asp */
/* Tooltip container */
.tooltip {
    position: relative;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    min-width: 120px;
    background-color: #fff;
    color: $colors-DARK;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

.tooltip .tooltiptext.tooltip-bottom, .tooltip .tooltiptext.tooltip-bottom-right {
    bottom: initial;
    top: 125%;
}

.tooltip .tooltiptext.tooltip-bottom-right {
    transform: translateX(-10%);
}

.tooltip .tooltiptext::before {
    background: #fff;
    border-radius: 6px;
    bottom: 0;
    content: "";
    height: 10px;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 1;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    background-color: #fff;
    box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.4);
    transform: translate(-6.07px, -6.07px) rotate(45deg);
    width: 10px;
    height: 10px;
    z-index: -1;
}

.tooltip .tooltiptext.tooltip-bottom::before, .tooltip .tooltiptext.tooltip-bottom-right::before {
    bottom: initial;
    top: 0;
}

.tooltip .tooltiptext.tooltip-bottom::after, .tooltip .tooltiptext.tooltip-bottom-right::after {
    bottom: 100%;
    top: initial;
    transform: rotate(45deg) translate(0, 6.5px);
}

.tooltip .tooltiptext.tooltip-bottom-right::after {
    left: 10%;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Show the tooltip text when `forced` class is set */
.tooltip.forced .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Fixes the layout on Firefox and IE, where the iframe to authenticate with
 * Google weirdly messes the layout by adding scrollbar even when not needed. */
#ssIFrame_google {
  top: 0;
}

/* Placeholder color COOL_GREY */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: $colors-COOL_GREY !important;
}
::-moz-placeholder { /* Firefox 19+ */
  color: $colors-COOL_GREY !important;
  opacity: 1;
}
:-ms-input-placeholder { /* IE 10+ */
  color: $colors-COOL_GREY !important;
}
:-moz-placeholder { /* Firefox 18- */
  color: $colors-COOL_GREY !important;
}

.no-scrollbars::-webkit-scrollbar {
  height: 0 !important;
  width: 0 !important;
}
.no-scrollbars {
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* React Select adjustments.
 *
 * - Keep the same height as other inputs.
 * - Adjust borders' color and shadow in different cases.
 * - Adjust the color and the position of the inner text.
 * */
.Select-input {
  height: 39px !important;
}
.Select-control {
  border-color: $colors-SILVER;
  transition: all 450ms cubic-bezier(0.18, 0.71, 0.4, 0.82) 0ms;
}
.Select:not(.is-open) > .Select-control:hover {
  border-color: $colors-COOL_GREY !important;
  box-shadow: initial;
}
.Select.is-focused:not(.is-open) > .Select-control {
  border-color: $colors-BOB_BLUE !important;
  box-shadow: initial;
}
.marked-invalid .Select:not(.is-open) > .Select-control {
  border-color: $colors-RED_PINK !important;
}
.Select.has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
  color: $colors-CHARCOAL_GREY !important;
}
.Select-placeholder {
  color: $colors-COOL_GREY !important;
}
.Select-placeholder, .Select--single > .Select-control .Select-value, .Select-input {
  padding: 7px 1px 1px 15px !important;
}
.Select-option {
  padding: 8px 1px 8px 15px !important;
}


/* Drop IE icons to clear field or reveal password. */
input::-ms-reveal, input::-ms-clear {
  display: none;
}

.blue-select::selection {
  background: rgba(24, 136, 255, .2);  /* colors.BOB_BLUE */
}

/* Bold labels on fieldsets in the profile page. */
.profile fieldset label {
  font-weight: bold;
}

@keyframes bounce {
  from, 10%, 25%, 45%, to {bottom: 0}
  20%  {bottom: 20px}
  30%  {bottom: 10px}
}

@keyframes jump {
    25% {-webkit-transform:translateY(-35%)}
    75% {-webkit-transform:translateY(35%)}
    100% {-webkit-transform:translateY(0%)}
}

@keyframes spin {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}

@import url('https://fonts.googleapis.com/css?family=Droid+Serif:italic&subset=latin,latin-ext')
