// Dependencies from other packages --------------------------------------------
@import '~sui-settings/src/settings';

@if $is-theme == false {
  @import '~sui-reset/src/reset';
  @import '~sui-typography/src/typography';
  @import '~sui-main/src/main';
}

/*
Form

This section contains all the elements that we can use to build a form.

Styleguide Forms-1
*/

// Form main
// -----------------------------------------------------------------------------
:invalid {
  box-shadow: none;
}

::placeholder {
  color: $c-text-secondary;
  font-size: $fz-base;
  text-overflow: ellipsis;
}

fieldset {
  + fieldset {
    margin-top: $gap-large;
  }

  &:first-child {
    margin-top: 0;
  }

  > button {
    margin-top: $gap-medium;
  }
}

legend {
  display: none;
}

textarea,
[type="text"],
[type="number"],
[type="tel"],
[type="button"],
[type="submit"],
select {
  border-radius: $b-radius-base;
}

[type="number"] {
  appearance: textfield;

  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
	}
}

// Label
// -----------------------------------------------------------------------------

label,
.FormGroup-label {
  display: inline-block;
  font-size: $fz-base;
  line-height: $lh-base-body;
  margin-bottom: $gap-medium / 4;
  vertical-align: top;
  width: auto;
}

// Input basic field
// -----------------------------------------------------------------------------
/*
Basic field

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Markup:
<form action="#" method="post">
  <fieldset>
    <legend>Lorem ipsum</legend>
    <ul>
      <li class="FormGroup">
        <label for="name">Basic field <span>(opcional)</span></label>
        <input type="text" id="name" placeholder="placeholder...">
        <p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
      </li>
      <li class="FormGroup is-success">
        <label for="name">Basic field with success</label>
        <input type="text" id="name">
      </li>
      <li class="FormGroup is-error">
        <label for="name">Basic field with error</label>
        <input type="text" id="name">
        <p class="FormGroup-info is-error">Lorem ipsum dolor sit amet.</p>
      </li>
      <li class="FormGroup is-disabled">
        <label for="name">Basic field disabled</label>
        <input type="text" id="name" disabled>
      </li>
  </fieldset>
</form>

Styleguide Forms-1.1
*/

@mixin field {
  border-color: $c-secondary-variant;
  border-style: solid;
  border-width: 1px;
  color: $c-text;
  display: block;
  font-size: $fz-base;
  height: $field-h-base;
  line-height: $lh-base-body;
  padding: $field-p-base;

  &:focus {
    border-color: $c-primary;
    outline: none;
  }
}

input,
textarea {
  @include field;
  width: 100%;
  margin: 0;

  @include mediaquery($mq-tablet) {
    width: $field-w-base;
  }
}

// Text area
// -----------------------------------------------------------------------------
/*
Textarea

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Markup:
<form action="#" method="post">
  <fieldset>
    <legend>Lorem ipsum</legend>
    <ul>
      <li class="FormGroup">
        <label for="name">Basic textarea <span>(opcional)</span></label>
        <div class="FormGroup-textarea">
          <textarea name="comment" value="">Lorem ipsum</textarea>
          <p class="FormGroup-textareaCounter"><span>114</span>/<span>250</span></p>
        </div>
      </li>
      <li class="FormGroup is-error">
        <label for="name">Basic textarea<span>(opcional)</span></label>
        <div class="FormGroup-textarea">
          <textarea name="comment" value="">Lorem ipsum</textarea>
          <p class="FormGroup-textareaCounter"><span>114</span>/<span>250</span></p>
        </div>
      </li>
      <li class="FormGroup is-disabled">
        <label for="name">Basic textarea disabled<span>(opcional)</span></label>
        <div class="FormGroup-textarea">
          <textarea name="comment" value="" disabled>Lorem ipsum</textarea>
          <p class="FormGroup-textareaCounter"><span>114</span>/<span>250</span></p>
        </div>
      </li>
  </fieldset>
</form>

Styleguide Forms-1.2
*/

textarea {
  font-family: $ff-base;
  min-height: $textarea-h-base;
  resize: $textarea-resize;
}

.FormGroup-textareaCounter,
.FormGroup-info {
  color: $c-text-secondary;
  font-size: $fz-small;
  margin-top: $gap-medium / 4;

  &.is-error {
    color: $c-error;
  }

  &.is-success {
    color: $c-success;
  }
}

/*
Basic Pulldown

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Markup:
<form action="#" method="post">
  <fieldset>
    <legend>Lorem ipsum</legend>
    <ul>
      <li class="FormGroup">
        <label for="name">Basic Pulldown</label>
        <select>
          <option value="01">Option01</option>
          <option value="02">Option02</option>
          <option value="03">Option03</option>
          <option value="04">Option04</option>
          <option value="05">Option05</option>
        </select>
        <p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
      </li>
      <li class="FormGroup is-error">
        <label for="name">Basic Pulldown</label>
        <select>
          <option value="01">Option01</option>
          <option value="02">Option02</option>
          <option value="03">Option03</option>
          <option value="04">Option04</option>
          <option value="05">Option05</option>
        </select>
        <p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
      </li>
      <li class="FormGroup is-disabled">
        <label for="name">Basic Pulldown disabled</label>
        <select>
          <option value="01">Option01</option>
          <option value="02">Option02</option>
          <option value="03">Option03</option>
          <option value="04">Option04</option>
          <option value="05">Option05</option>
        </select>
        <p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
      </li>
  </fieldset>
</form>

Styleguide Forms-1.3
*/

select {
  @include field;
  appearance: none;
  background-color: transparent;
  background-image: url(#{$path-bg-images}#{$select-bg-arrow});
  background-position: right center;
  background-repeat: no-repeat;
  cursor: pointer;
  padding: $select-p-base;
  width: $field-w-base;
}

// Input Group
// -----------------------------------------------------------------------------

.InputGroup {
  display: table;
  width: 100%;

  > div {
    display: table-cell;
  }

  input { // fix iOS buttons separation
    margin: 0;
    border-right-width: 0;
    width: 100%;

    .is-active & {
      background-color: $c-contrast;
      cursor: default;
    }
  }

  div:last-child input {
    border-right-width: 1px;
  }
}

/*
Input group date

Use class `.InputGroup--date`

Markup:
<form action="#" method="post">
  <fieldset>
    <legend>Lorem ipsum</legend>
    <ul>
      <li class="FormGroup">
        <label for="day">Input group date</label>
        <div class="InputGroup InputGroup--date">
          <div>
            <input type="number" maxlength="2" name="day" id="day" placeholder="DD">
          </div>
          <div>
            <input type="number" maxlength="2" name="month" id="month" placeholder="MM">
          </div>
          <div>
            <input type="number" maxlength="4" name="year" id="year" placeholder="AAAA">
          </div>
        </div>
      </li>
      <li class="FormGroup is-error">
        <label for="day">Input group date</label>
        <div class="InputGroup InputGroup--date">
          <div>
            <input type="number" maxlength="2" name="day" id="day" placeholder="DD">
          </div>
          <div>
            <input type="number" maxlength="2" name="month" id="month" placeholder="MM">
          </div>
          <div>
            <input type="number" maxlength="4" name="year" id="year" placeholder="AAAA">
          </div>
        </div>
      </li>
      <li class="FormGroup is-disabled">
        <label for="day">Input group date disabled</label>
        <div class="InputGroup InputGroup--date">
          <div>
            <input type="number" maxlength="2" name="day" id="day" placeholder="DD" disabled>
          </div>
          <div>
            <input type="number" maxlength="2" name="month" id="month" placeholder="MM" disabled>
          </div>
          <div>
            <input type="number" maxlength="4" name="year" id="year" placeholder="AAAA" disabled>
          </div>
        </div>
      </li>
    </ul>
  </fieldset>
</form>

Styleguide Forms-1.4
*/

.InputGroup--date {
  width: auto;
  border: 1px solid $c-dark-soft;

  > div {
    position: relative;

    &::before {
      content: '|';
      position: absolute;
      top: 12px;
      left: -5px;
      color: $c-dark-soft;

      .is-disabled & {
        color: $c-disabled;
      }
    }

    &:first-of-type::before {
      content: '';
    }

    input {
      width: $field-w-date;
      margin-left: -4px;
      text-align: center;
      border: 0;
    }

    &:last-child input {
      width: $field-w-date-year;
    }
  }

  > div:first-of-type input {
    margin-left: 0;
  }

  .is-error & {
    border: 1px solid $c-error;
  }
}

// Checkboxes and radiobuttons
// -----------------------------------------------------------------------------
/*
Checkboxes and radiobuttons

Markup:
<form action="#" method="post">
  <fieldset>
    <legend>Legend</legend>
    <ul>
      <li class="FormGroup">
        <p class="FormGroup-label">Checkbox List</p>
        <ul>
          <li class="FormGroup-check">
            <input type="checkbox" id="checkbox1">
            <label for="checkbox1">Checkbox 1</label>
          </li>
          <li class="FormGroup-check is-error">
            <input type="checkbox" id="checkbox2">
            <label for="checkbox2">Checkbox 2</label>
          </li>
          <li class="FormGroup-check is-disabled">
            <input type="checkbox" id="checkbox3" disabled>
            <label for="checkbox3">Checkbox 2</label>
          </li>
        </ul>
      </li>
      <li class="FormGroup">
        <p class="FormGroup-label">Radio button List</p>
        <ul>
          <li class="FormGroup-radio">
            <input type="radio" id="radio1" name="radio">
            <label for="radio1">Radio button field 1</label>
          </li>
          <li class="FormGroup-radio is-error">
            <input type="radio" id="radio2" name="radio">
            <label for="radio2">Radio button field 2</label>
          </li>
          <li class="FormGroup-radio is-disabled">
            <input type="radio" id="radio3" name="radio" disabled>
            <label for="radio3">Radio button field 2</label>
          </li>
        </ul>
        <p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
      </li>
    </ul>
  </fieldset>
</form>

Styleguide Forms-1.5
*/

[type="radio"],
[type="checkbox"] {
  display: inline-block;
  cursor: pointer;
  padding: 0;
  margin: $check-rad-m-base;
  width: auto;
  border: 0 none;
  vertical-align: top;
  height: auto;
  font-size: $fz-base;

  + label {
    cursor: pointer;
  }

}

.FormGroup-radio,
.FormGroup-check {
  display: flex;
  align-items: flex-start;

  input {
    flex-shrink: 0;
  }

  &.is-error {
    color: $c-error;
  }

  &.is-disabled input {
    opacity: .6;

    + label {
      color: $c-disabled;
      cursor: default;
    }
  }

  &--inline {
    float: left;
    white-space: nowrap;
    margin-right: $gap-medium;

    &:last-child {
      margin-right: 0;
    }
  }
}

/*
Checkboxes and radiobuttons inline

Markup:
<form action="#" method="post">
  <fieldset>
    <ul>
      <li class="FormGroup-radio--inline">
        <input type="radio" checked="checked" id="option1" name="options"><label for="option1">Option 1</label>
      </li>
      <li class="FormGroup-radio--inline">
        <input type="radio" id="option2" name="options"><label for="option2">Option 2</label>
      </li>
    </ul>
  </fieldset>
</form>

Styleguide Forms-1.6
*/

/*
StrengthBar

Use class `.StrengthBar` to create a strength bar.

Markup:
<dl class="StrengthBar">
    <dt>Lorem ipsum</dt>
    <dd>
      <meter max="3" min="0" value="2" high="2" low="2" optimum="3"></meter>
    </dd>
</dl>

Styleguide Forms-1.7
*/

.StrengthBar {
  meter {
    width: 100%;
    height: 7px;
    vertical-align: top;
    appearance: none;
    background: $c-dark-light;

    /* WebKit */
    &::-webkit-meter-bar {
      background: $c-dark-soft;
    }

    &::-webkit-meter-optimum-value,
    &::-webkit-meter-suboptimum-value {
      background: $c-success;
    }

    &::-webkit-meter-even-less-good-value {
      background: $c-error;
    }

    /* Firefox */
    &:-moz-meter-optimum::-moz-meter-bar,
    &:-moz-meter-sub-optimum::-moz-meter-bar {
      background: $c-success;
    }

    &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
      background: $c-error;
    }
  }
}

// Form states
// -----------------------------------------------------------------------------

.FormGroup {
  margin-bottom: $gap-medium;

  &.is-error {
    label {
      color: $c-error;
    }

    input,
    textarea,
    select {
      border-color: $c-error;
    }
  }

  &.is-success {
    label {
      color: $c-success;
    }

    input,
    textarea,
    select {
      border-color: $c-success;
    }

    input {
      background-color: lighten($c-success, 65%);
    }
  }

  &.is-disabled {
    label,
    .FormGroup-info,
    .FormGroup-textareaCounter,
    input,
    textarea,
    select,
    [disabled],
    [placeholder] {
      color: $c-disabled;
      cursor: default;
    }

    input,
    textarea,
    select {
      border-color: $c-disabled;
    }

    [disabled],
    [placeholder] {
      background: transparent;
    }

    ::placeholder {
      color: $c-disabled;
    }
  }

  &:last-child {
    margin-bottom: 0;
  }
}