// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>

input,
select,
textarea {
  &.invalid {
    border-color: $color-danger;
    color: $color-danger;
  }
}

.form-container,
.generic-form {
  display: flex;
  justify-content: center;
  flex-direction: column;

  .forms-container {
    display: flex;
    margin-top: 40px;
    width: 536px;
    justify-content: center;
  }

  form {
    display: flex;
    flex-direction: column;
    // flex-basis: 368px;
  }

  .fields-row {
    margin-bottom: 20px;
    flex-direction: column;

    .options {
      display: flex;
      justify-content: flex-end;
      font-size: $fs14;
      margin-top: 13px;
    }
  }

  .field {
    margin-bottom: 20px;
  }

  h1 {
    font-size: $fs36;
    color: #2C233E;
    margin-bottom: 20px;
  }

  .subtitle {
    font-size: $fs24;
    color: #2C233E;
    margin-bottom: 20px;
  }

  h2 {
    font-size: $fs14;
    color: $color-gray-60;
    // height: 40px;
    display: flex;
    align-items: center;
  }

  a {
    text-decoration: underline;
  }

  .links {
    display: flex;
    font-size: $fs14;
    justify-content: space-between;
    margin-bottom: $medium;

    &.demo {
      justify-content: center;
      margin-top: $big;
    }
  }

  .link-entry {
    font-size: $fs14;
    color: $color-gray-40;
    margin-bottom: 10px;
  }

  .link-entry a {
    font-size: $fs14;
    color: $color-primary-dark;
  }
}

.custom-input {
  display: flex;
  flex-direction: column;
  position: relative;

  input {
    background-color: $color-white;
    border-radius: 2px;
    border: 1px solid $color-gray-20;
    color: $color-gray-60;
    font-size: $fs14;
    height: 40px;
    margin: 0;
    padding: 15px 15px 0 15px;
    width: 100%;
  }

  // Makes the background for autocomplete white
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px $color-white inset !important;
  }

  label {
    font-size: $fs12;
    color: $color-gray-30;
    position: absolute;
    left: 15px;
    top: 6px;
  }

  &.invalid {
    input {
      border-color: $color-danger;
    }
    label {
      color: $color-danger;
    }
  }

  &.valid {
    input {
      border-color: $color-success;
    }
  }

  &.focus {
    input {
      border-color: $color-gray-60;
    }
  }

  &.disabled {
    input {
      background-color: lighten($color-gray-10, 5%);
      user-select: none;
    }
  }

  &.empty {
    input {
      padding-top: 0;
    }

    label {
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      width: 1px;
    }
  }

  &.with-icon {
    input {
      padding-right: 50px;
    }
  }

  .help-icon {
    position: absolute;
    right: 15px;
    top: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    svg {
      fill: $color-gray-30;
      width: 15px;
      height: 15px;
    }
  }

  .hint {
    padding: 4px;
    font-size: $fs12;
  }

  .error {
    color: $color-danger;
    padding: 4px;
    font-size: $fs12;
  }
}

.custom-select {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;

  label {
    font-size: $fs12;
    color: $color-gray-30;
  }

  select {
    cursor: pointer;
    font-size: $fs14;
    border: 0px;
    opacity: 0;
    z-index: 10;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    position: absolute;
    width: calc(100% - 1px);
    height: 100%;
    padding: 15px;
  }

  .main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 15px;

  }

  .input-container {
    display: flex;
    flex-direction: row;

    background-color: $color-white;
    border-radius: 2px;
    border: 1px solid $color-gray-20;
    height: 40px;

    &.invalid {
      border-color: $color-danger;
      label {
        color: $color-danger;
      }
    }

    &.valid {
      border-color: $color-success;
    }

    &.focus {
      border-color: $color-gray-60;
    }

    &.disabled {
      background-color: $color-gray-10;
      user-select: none;
    }
  }

  .value {
    color: $color-gray-60;
    font-size: $fs14;
    width: 100%;
    border: 0px;
    padding: 0px;
    margin: 0px;
  }

  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    pointer-events: none;

    svg {
      fill: $color-gray-30;
      transform: rotate(90deg);
      width: 15px;
      height: 15px;
    }
  }
}