@if not-imported("import_once_func") { @import "import_once_func"; }
@if not-imported("framework") { @import "framework"; }

/**
 * Since fieldset borders are removed in the reset style sheet, adjust the
 * legends accordingly
 */

*:not(.widget) {
  > fieldset {
    clear: left;
  }
}

legend {
  width: 100%;
  display: block;
  font-weight: bold;
  border: 0;
}

input,
textarea,
select {
  line-height: 150%;
  outline: none;
  font-size: $font-size-field;
  font-family: $font-family-form;
  font-weight: 400;
}

/**
 * Placeholders
 */
::-webkit-input-placeholder { /* Webkit Browsers */
  color: $placeholder-color;
  font-size: $font-size-placeholder;
  text-transform: uppercase;
  opacity: 0.9;
  font-weight: 600;
}

:-moz-placeholder { /* Firefox < 19 */
  color: $placeholder-color;
  font-size: $font-size-placeholder;
  text-transform: uppercase;
  opacity: 0.9;
  font-weight: 600;

}

::-moz-placeholder {  /* Firefox >= 19 */
  color: $placeholder-color;
  font-size: $font-size-placeholder;
  text-transform: uppercase;
  opacity: 0.9;
  font-weight: 600;

}

:-ms-input-placeholder { /* IE 10-11 */
  color: $placeholder-color !important;
  font-size: $font-size-placeholder !important;
  text-transform: uppercase !important;
  opacity: 0.9;
  font-weight: 600;

}

::-ms-input-placeholder { /* Edge (old) */
  color: $placeholder-color;
  font-size: $font-size-placeholder;
  text-transform: uppercase;
  opacity: 0.9;
  font-weight: 600;

}

::placeholder {  /* CSS 4 Draft */
  color: $placeholder-color;
  font-size: $font-size-placeholder;
  text-transform: uppercase;
  opacity: 0.9;
  font-weight: 600;

}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/**
 * Widget
 */
.widget {
  margin-bottom: 15px;
  min-height: font-size($field-height+(1.75*10px));

  input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"],
  input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input:not([type]), textarea, select {
    vertical-align: top;
  }

  > .formelement {
    position: relative;
  }

  &.icon {
    > .formelement {
      > input,
      > textarea {
        padding-right: 1.75em;
      }
      > .ico-wrapper {
        font-size: font-size(20px);
        cursor: default;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 1.75em;
        border-radius: 0 .28571429rem .28571429rem 0;

        > a {
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: inherit;
          color: $color-text;

          &:hover {
            color: $color-link;
          }
        }

        &.link {
          cursor: pointer;
        }
      }
    }
  }
}

/**
 * Text fields and textareas
 */
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"],
input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input:not([type]), textarea, select {
  display: inline-block;
  width: 100%;
  height: $field-height;
  line-height: #{$field-height - (2*$field-border-width) - (2*$field-padding-vertical)};
  padding: $field-padding;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: $field-color;
  background: $field-background-color;
  border: $field-border-width solid $field-border-color;
  -webkit-border-radius: $field-radius;
  -moz-border-radius: $field-radius;
  border-radius: $field-radius;
  -webkit-transition: all .15s linear;
  -moz-transition: all .15s linear;
  -ms-transition: all .15s linear;
  -o-transition: all .15s linear;
  transition: all .15s linear;

  &:focus {
    outline: 0;
    background: $field-background-color-hl;
    border-color: $field-border-color-hl;
  }
}


textarea {
  line-height: 1.35;
}

/**
 * Label styling
 */

.formbody {
  @include cf;

  label {
    color: $label-color;
    display: block;
    margin-bottom: 0.25em;
    padding-top: 0.5em;
    text-transform: uppercase;
    font-size: font-size(10px);
    letter-spacing: 0.1em;
    line-height: 1.5;
    font-weight: 600;

    .mandatory {
      vertical-align: middle;
      font-size: font-size(18px);
      font-weight: 300;
      color: $color-link;
      line-height: 0;
    }
  }
  .widget {
    &.lblp {
      padding-top: font-size(10px*2.25);
    }
  }
}

/**
 * Fieldset styling
 */
.formbody > fieldset {
  margin-top: 1.5em;

  &:first-of-type {
    margin-top: 0;
  }

  legend {
    @include headline(font-size(18px));
  }
}


/**
 * Fix some width and height settings
 */
input[type="file"] {
  cursor: pointer;
}

select, input[type="file"] {
  display: block;
}

input[type="file"], input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] {
  width: auto;
}

textarea, select[multiple], select[size] {
  height: auto;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
}
select::-ms-expand {
  display: none;
}

select {
  display: inline-block;
  width: 100%;
  height: $field-height;
  padding: $field-padding-vertical $field-padding-horizontal+25px $field-padding-vertical $field-padding-horizontal;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: $field-color;
  background: $field-background-color;
  border: $field-border-width solid $field-border-color;
  -webkit-border-radius: $field-radius;
  -moz-border-radius: $field-radius;
  border-radius: $field-radius;
  -webkit-transition: all .15s linear;
  -moz-transition: all .15s linear;
  -ms-transition: all .15s linear;
  -o-transition: all .15s linear;
  transition: all .15s linear;
}
.select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  min-height: $field-height;

  &:before,
  &:after {
    //@include icon('\e90a',font-size(20px));
    content: '';
    width: 1em;
    height: 1em;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23323535" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M14.898 19.849c0.585 0.579 1.592 0.604 2.202 0.001l12.084-12.084 2.815 2.815-12.093 12.093c-2.055 2.027-5.656 2.13-7.815-0.001l-12.092-12.092 2.815-2.815c4.027 4.029 8.054 8.056 12.083 12.083z"/%3E%3C/svg%3E') 50% 50% no-repeat;
    position: absolute;
    right: 10px;
    top: 10px;
    pointer-events: none;
  }
  &:after {
    @include transition(all 0.25s);
    opacity: 0;
    visibility: hidden;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M14.898 19.849c0.585 0.579 1.592 0.604 2.202 0.001l12.084-12.084 2.815 2.815-12.093 12.093c-2.055 2.027-5.656 2.13-7.815-0.001l-12.092-12.092 2.815-2.815c4.027 4.029 8.054 8.056 12.083 12.083z"/%3E%3C/svg%3E') 50% 50% no-repeat;
  }
  &:hover {
    &:after {
      opacity: 1;
      visibility: visible;
    }
  }

  /*select {
    vertical-align: top;
  }*/
}
/**
 * Checkboxes and radio buttons
 */

.widget {
  &.widget-checkbox,
  &.widget-radio {
    > fieldset {
      padding-left: 1.5em;
    }

    .options {
      > span {
        margin-bottom: 0.25em;
        display: block;
        font-size: font-size(12px);
      }
    }

    input[type="radio"],
    input[type="checkbox"] {
      height: 2em;
      width: 2em;
      margin-left: -2.25em;
      margin-right: 5px;
    }

    label {
      display: inline;
      margin-bottom: 0;
      font-size: font-size(12px);
      font-weight: 600;
    }

    /*@supports(-webkit-appearance: none) or (-moz-appearance: none) {
      input[type='checkbox'],
      input[type='radio'] {
        --active: #275EFE;
        --active-inner: #fff;
        --focus: 2px rgba(39, 94, 254, .3);
        --border: #BBC1E1;
        --border-hover: #275EFE;
        --background: #fff;
        --disabled: #F6F8FF;
        --disabled-inner: #E1E6F9;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: background .3s, border-color .3s, box-shadow .2s;
        &:after {
          content: '';
          display: block;
          left: 0;
          top: 0;
          position: absolute;
          transition: transform var(--d-t, .3s) var(--d-t-e, ease), opacity var(--d-o, .2s);
        }
        &:checked {
          --b: var(--active);
          --bc: var(--active);
          --d-o: .3s;
          --d-t: .6s;
          --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
        }
        &:disabled {
          --b: var(--disabled);
          cursor: not-allowed;
          opacity: .9;
          &:checked {
            --b: var(--disabled-inner);
            --bc: var(--border);
          }
          & + label {
            cursor: not-allowed;
          }
        }
        &:hover {
          &:not(:checked) {
            &:not(:disabled) {
              --bc: var(--border-hover);
            }
          }
        }
        &:focus {
          box-shadow: 0 0 0 var(--focus);
        }
        &:not(.switch) {
          width: 21px;
          &:after {
            opacity: var(--o, 0);
          }
          &:checked {
            --o: 1;
          }
        }
        & + label {
          font-size: 14px;
          line-height: 21px;
          display: inline-block;
          vertical-align: top;
          cursor: pointer;
          margin-left: 4px;
        }
      }
      input[type='checkbox'] {
        &:not(.switch) {
          border-radius: 7px;
          &:after {
            width: 5px;
            height: 9px;
            border: 2px solid var(--active-inner);
            border-top: 0;
            border-left: 0;
            left: 7px;
            top: 4px;
            transform: rotate(var(--r, 20deg));
          }
          &:checked {
            --r: 43deg;
          }
        }
        &.switch {
          width: 38px;
          border-radius: 11px;
          &:after {
            left: 2px;
            top: 2px;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background: var(--ab, var(--border));
            transform: translateX(var(--x, 0));
          }
          &:checked {
            --ab: var(--active-inner);
            --x: 17px;
          }
          &:disabled {
            &:not(:checked) {
              &:after {
                opacity: .6;
              }
            }
          }
        }
      }
      input[type='radio'] {
        border-radius: 50%;
        &:after {
          width: 19px;
          height: 19px;
          border-radius: 50%;
          background: var(--active-inner);
          opacity: 0;
          transform: scale(var(--s, .7));
        }
        &:checked {
          --s: .5;
        }
      }
    }*/
  }
}

input[type="radio"], input[type="checkbox"] {
  margin: 0 3px 0 0;
}

input[type="radio"], input[type="checkbox"], label {
  vertical-align: middle;
}

/**
 * Handle disabled and read-only
 */
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
  cursor: not-allowed;
  background: $field-background-color-ro;
}

input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] {
  background: transparent;
}

/**
 * Buttons
 */
input[type="submit"],
//input[type="button"],
button[type="submit"],
.submit,
.button {
  @include button-outline();

  &:not([data-icon]) {
    @include button-no-icon;
  }

  &.button-icon-only {
    @include button-icon-only;
  }

  .-alt-color > & {
    @include button-outline($color: $color-stroke-grey, $border-color: $color-stroke-grey);
    @include button-no-icon;
  }

  &.-big {
    padding: $button-padding-vertical*2 $button-padding-horizontal*2;
    height: $button-height*2;
    line-height: #{$button-height*2 - (2*$button-border-width) - (2*($button-padding-vertical*2))};
  }
}

.button-block {
  display: block;
  width: 100%;
}