/*
Shared input styles
Used by all input components
*/

input::-webkit-input-placeholder {
  color: $grey-medium !important;
  opacity: 1 !important;
}

input::-moz-placeholder {
  color: $grey-medium !important;
  opacity: 1 !important;
}
/* FF 4-18 */
input:-moz-placeholder {
  color: $grey-medium !important;
  opacity: 1 !important;
}
/* FF 19+ */
input:-ms-input-placeholder {
  color: $grey-medium !important;
  opacity: 1 !important;
}

input::placeholder {
  color: $grey-medium !important;
  opacity: 1 !important;
}

input:focus::-webkit-input-placeholder {
  color: transparent;
}

input:focus:-moz-placeholder {
  color: transparent;
}
/* FF 4-18 */
input:focus::-moz-placeholder {
  color: transparent;
}
/* FF 19+ */
input:focus:-ms-input-placeholder {
  color: transparent;
}

.is-field-info {
  margin: 0 0.5rem;
  font-size: 0.875rem;
  padding: 0 0 0.5rem 0;
  + .has-error {
    margin-top: 0.15rem;
  }
}
.is-field-info-important {
  @extend .is-field-info;
  background-color: $ben-franklin-blue-light;
  padding: 1rem;
}

form {
  .form-padding {
    padding: 0 0.5rem;
  }
  fieldset {
    legend {
      font-size: 0.875rem;
      padding: 0 0.5rem;
      font-weight: bold;
    }
  }
  .field {
    margin-bottom: 0 !important;
  }
  .form-submit {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

.input-wrap {
  padding: 0.5rem 0.5rem 0.5rem;
  position: relative;
  label {
    font-size: 0.875rem;
    color: $grey-dark;
    font-weight: $weight-bold;
    line-height: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
  }
  .is-field-info {
    margin: 0;
  }
  &.required {
    &.input-textbox,
    &.input-textarea,
    &.input-dropdown {
      label {
        &:after {
          content: "*";
          font-size: 0.875rem;
        }
      }
    }
  }
  &.has-error {
    background-color: $error-light;
    margin-bottom: 2px;
    .select select,
    .input,
    .textarea {
      border: 2px solid $love-park-red-dark !important;
      &:focus {
        border: 2px solid $love-park-red-dark !important;
      }
    }
    .input-error-msg {
      font-size: 0.9rem;
      color: $love-park-red-dark;
      font-weight: $weight-semibold;
      line-height: 1.2;
      position: relative;
      margin-top: 0.4rem;
      .icon {
        font-size: 1rem;
        width: 1rem;
        position: absolute;
        top: -3px;
        left: 1px;
      }
      span:last-child {
        left: 1.3rem;
        padding-right: 1.3rem;
        position: relative;
        display: inline-block;
      }
    }
    &.input-textbox,
    &.input-textarea,
    &.input-dropdown {
      label {
        color: $love-park-red-dark;
      }
    }
    &.input-checkbox,
    &.input-radio {
      legend {
        color: $love-park-red-dark;
      }
    }
  }
  &.inner-label {
    &.input-textbox,
    &.input-dropdown,
    &.input-textarea {
      .control {
        overflow: hidden;
      }
      label {
        position: absolute;
        top: 1px;
        left: 0;
        z-index: 5;
        padding: 0 0 0 0.9rem;
        white-space: nowrap;
      }
    }
    input::-webkit-input-placeholder {
      color: $grey-dark !important;
      opacity: 1 !important;
    }

    input::-moz-placeholder {
      color: $grey-dark !important;
      opacity: 1 !important;
    }
    /* FF 4-18 */
    input:-moz-placeholder {
      color: $grey-dark !important;
      opacity: 1 !important;
    }
    /* FF 19+ */
    input:-ms-input-placeholder {
      color: $grey-dark !important;
      opacity: 1 !important;
    }

    input::placeholder {
      color: $grey-dark !important;
      opacity: 1 !important;
    }
  }
  .input,
  .textarea,
  .select select {
    border-bottom: 1px solid #979797;
    font-size: 1.063rem;
    &:focus {
      background-color: $white;
      border: 2px solid $electric-blue !important;
    }
  }
  &.input-checkbox,
  &.input-radio {
    .control {
      margin-bottom: 0.5rem;
    }
    label {
      top: 0;
      left: 0;
      page-break-inside: avoid;
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
      font-weight: $weight-normal;
    }
    fieldset {
      legend {
        padding: 0 0 0.1rem 0;
      }
    }

    &.small-checkradio {
      .control {
        margin-bottom: 0.1rem;
      }
      .is-checkradio[type="checkbox"] + label {
        margin-left: 1.5rem;
        font-size: $size-small;
        &:before {
          width: 1.125rem;
          height: 1.125rem;
          left: -1.5rem !important;
          top: 0.18rem;
        }
        &:after {
          top: 0.3rem;
          left: -1.1rem !important;
        }
      }

      .is-checkradio[type="radio"] + label {
        margin-left: 1.5rem !important;
        font-size: $size-small;
        &:before {
          width: 1.125rem;
          height: 1.125rem;
          left: -1.5rem !important;
          top: 0.18rem;
        }
        &:after {
          transform: scale(0.3);
          top: 0rem;
          left: -1.7rem !important;
        }
      }
    }

    &.required {
      fieldset legend {
        &:after {
          content: "*";
          font-size: 0.875rem;
        }
      }
    }
    .is-checkradio[type="checkbox"]:checked {
      + label {
        &:before {
          border-color: transparent !important;
          background-color: $ben-franklin-blue;
        }
        &:after {
          font-weight: $weight-semibold;
          border-color: $white !important;
        }
      }
    }

    .is-checkradio[type="radio"]:checked {
      + label {
        &:before {
          border-color: transparent !important;
          background-color: $ben-franklin-blue;
        }
        &:after {
          background-color: $white;
        }
      }
    }

    .is-checkradio + label:before {
      border: 0.09rem solid #a1a1a1 !important;
      left: -2rem !important;
    }
    .is-checkradio[type="checkbox"] + label:after {
      top: 0.3rem;
      left: -1.4rem !important;
    }
    .is-checkradio[type="radio"] + label:after {
      left: -2rem !important;
    }
    .is-checkradio + label {
      display: inline-block;
      font-size: 1.063rem;
      margin: 0 0 0 2rem;
      padding: 0;
      &:hover {
        &:before {
          border-color: $ben-franklin-blue !important;
        }
      }
    }
  }
  .supplemental-text {
    font-size: $size-small;
    padding: 0.2rem 0.75rem 0 0.8rem;
    line-height: 1rem;
  }
}

.field {
  .control {
    &.is-loading {
      // &:after {
      // top: calc(50% - 1.75rem);
      // }
      span.icon {
        opacity: 0 !important;
      }
    }
    &.has-icons-right,
    &.has-icons-left {
      span.input-icon.is-right,
      span.input-icon.is-left {
        height: 3.5rem;
        font-size: 1.2rem;
        color: $grey-medium;
      }
      .select {
        label {
          padding-left: 2.85rem;
        }
        select {
          padding-left: 2.5rem;
        }
      }
    }
  }
}