/*
 * SonarQube
 * Copyright (C) 2009-2017 SonarSource SA
 * mailto:info AT sonarsource DOT com
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 3 of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
@import (reference) "../variables";
@import (reference) "../mixins";
@import (reference) "../components/ui";

/*
 * Inputs
 */

input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=date],
input[type=number],
textarea,
select {
  border: 1px solid @darkGrey;
  box-sizing: border-box;
  border-radius: 2px;
  background: #fff;
  color: @baseFontColor;
  transition: border-color 0.2s ease;

  &:active,
  &:focus {
    border-color: @highlighted;
    box-shadow: none;
    outline: none;
  }

  &.invalid { border-color: @red; }
}

input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=date],
input[type=number] {
  height: @formControlHeight;
  padding: 0 6px;
}

input[type="search"] {
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

textarea {
  padding: 3px;

  &.width-100 {
    max-width: 100%;
  }
}

select {
  height: @formControlHeight;
  line-height: @formControlHeight;
}

button,
.button,
input[type=submit],
input[type=button] {
  display: inline-block;
  vertical-align: baseline;
  height: @formControlHeight;
  line-height: @formControlHeight - 2px;
  padding: 0 12px;

  border: 1px solid @darkBlue;
  border-radius: 2px;
  box-sizing: border-box;

  background: transparent;

  color: @darkBlue;
  font-weight: 600;
  font-size: @smallFontSize;
  text-align: center;
  text-decoration: none;

  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;

  &:hover, &:focus, &.button-active {
    background: @darkBlue;
    color: #fff;
  }

  &:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  }

  &:disabled,
  &:disabled:hover,
  &:disabled:active,
  &:disabled:focus {
    color: #bbb;
    border-color: #ddd;
    background: #ebebeb;
    cursor: not-allowed;
  }
}

.button-red,
input[type="submit"].button-red {
  border-color: @red;
  color: @red;

  &:hover, &:focus, &.active {
    background: @red;
    color: #fff;
  }
}

.button-success,
input[type="submit"].button-success {
  border-color: @green;
  color: @green;

  &:hover, &:focus, &.active {
    background: @green;
    color: #fff;
  }
}

.button-grey,
input[type="submit"].button-grey {
  border-color: @middleGrey;
  color: @secondFontColor;

  &:hover, &:focus, &.active {
    background: @middleGrey;
    color: @white;
  }

  &.button-active {
    background: @secondFontColor;
    border-color: @secondFontColor;
    color: @white;
  }
}

.button-clean,
.button-clean:hover,
.button-clean:focus {
  padding: 0;
  line-height: 1;
  border: none;
  background: transparent;
  box-shadow: none;
  color: @baseFontColor;
}

.button-clean path {
  transition: opacity 0.3s ease;
}

.button-clean:hover path {
  opacity: 0.8;
}

.button-link {
  display: inline;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: @darkBlue;
  font-weight: 400;
  font-size: inherit;
  line-height: inherit;
  transition: all 0.2s ease;

  &:hover, &:focus {
    background: transparent;
    color: @blue;
  }

  &:active {
    box-shadow: none;
    outline: thin dotted #CCC;
  }

  &:disabled,
  &:disabled:hover,
  &:disabled:active,
  &:disabled:focus {
    color: @secondFontColor;
    background: transparent;
    cursor: default;
  }
}

.button-small {
  height: 20px;
  line-height: 18px;

  & > svg {
    margin-top: 2px;
  }
}

.button-group {
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  white-space: nowrap;

  & > button,
  & > .button {
    position: relative;
    z-index: @normal-z-index;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    cursor: pointer;

    &:hover, &:focus, &:active, &.active {
      &:not(:disabled) {
        z-index: @above-normal-z-index;
      }
    }

    &:disabled { z-index: @below-normal-z-index; }
  }

  & > button:not(:first-child),
  & > .button:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  & > button:not(:last-child):not(.dropdown-toggle),
  & > .button:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  & > button + button,
  & > button + .button,
  & > .button + button,
  & > .button + .button {
    margin-left: -1px;
  }

  & > a:not(.button) {
    vertical-align: middle;
    margin: 0 8px;
    font-size: @smallFontSize;
  }
}

.input-tiny   { width: 60px; }
.input-small  { width: 100px; }
.input-medium { width: 150px; }
.input-large  { width: 200px; }
.input-super-large {
  width: 100%;
  max-width: 300px;
  min-width: 200px;
}

textarea.input-super-large {
  max-width: 600px;
  min-width: 300px;
}

.input-clear {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
}

.input-code {
  font-family: @monoFontFamily;
  font-size: @monoFontSize;
}

em.mandatory {
  color: #990000;
  font-style: italic;
}

label[for] {
  cursor: pointer;
}

.radio-toggle {
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  white-space: nowrap;

  & > li {
    display: inline-block;
    vertical-align: middle;
    font-size: @smallFontSize;

    &:first-child > label {
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px;
    }

    &:last-child > label {
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
    }
  }

  & > li + li > label { border-left: none; }

  & > li > label {
    @padding-top: (@formControlHeight - 16px) / 2;
    display: inline-block;
    padding: (@padding-top - 1px) 12px (@padding-top + 1px);
    margin: 0;
    border: 1px solid @darkBlue;
    color: @darkBlue;
  }

  input[type="radio"] {
    display: none;
  }

  input[type="radio"]:checked + label {
    background-color: @darkBlue;
    color: #fff;
    font-weight: 600;
  }

  input[type="radio"]:disabled + label {
    color: #bbb;
    border-color: #ddd;
    background: #ebebeb;
    cursor: not-allowed;
  }

}