/**
 *  webform-toolkit
 *  Create a HTML form with field validation and custom errors.
 *
 *  Copyright 2012-2024, Marc S. Brooks (https://mbrooks.info)
 *  Licensed under the MIT license:
 *  http://www.opensource.org/licenses/mit-license.php
 */

.webform {
  fieldset {
    border: none;
    margin: 5px 10px;

    div {
      display: inline-block;
      margin: 5px;

      label {
        display: inline-block;
        width: 150px;
      }

      input, textarea {
        box-shadow: none;
        outline: none;

        &.error-on {
          border: 1px solid #ff0000;
          color: #ff0000;
        }

        &.error-off {
          border: 1px solid #ddd;
          border-bottom: 1px solid #bbb;
          border-left: 1px solid #aaa;
        }
      }

      input {
        &[type=text],
        &[type=password],
        &[type=file] {
          border: 1px solid #ddd;
          border-bottom: 1px solid #bbb;
          border-left: 1px solid #aaa;
          width: 200px;
        }

        &[type=text],
        &[type=password] {
          height: 20px;
        }

        &[type=file] {
          border: 1px solid transparent;
          margin: 5px 0px;
        }

        &[type=button],
        &[type=submit] {
          display: block;
          margin: 0px auto;
          padding: 2px;
        }
      }

      select {
        box-shadow: none;
      }

      textarea {
        border: 1px solid #ddd;
        border-bottom: 1px solid #bbb;
        border-left: 1px solid #aaa;
        height: 50px;
        width: 200px;
      }

      p {
        font-size: 12px;
        padding: 5px;
        text-align: center;

        &.description {
          border-bottom: 1px solid #eee;
          border-top: 1px solid #eee;
          margin-top: 5px;
        }

        &.error-message {
          background-color: #f7f7f7;
          border: 1px solid #ccc;
          border-top: 1px solid #eee;
          display: none;
          margin-bottom: 20px;
        }
      }

      .checkbox, .radios {
        display: inline-block;
      }

      .checkbox {
        input, span {
          display: inline-block;
        }

        span {
          padding-left: 5px;
          vertical-align: middle;
        }
      }
    }

    legend {
      font-weight: bold;
    }
  }

  .form-submit {
    padding: 10px 0px;
  }
}