@import "loldesign_publisher/base";

$input-border-color: #d1d3d4;
$footer-border-color: #808284;

form{
  margin-top: 20px;

  .two-columns{
    article.column{
      &:nth-child(1){
        @include grid(7);
        @include alpha;
      }
      &:nth-child(2){
        @include grid(9);
        @include push(1);
        @include omega;
      }
    }
  }
  .three-columns{
    article.column{
      &:nth-child(1){
        @include grid(6);
        @include alpha;
      }
      &:nth-child(2){
        @include grid(5);
        @include push(1);
      }
      &:nth-child(3){
        @include push(2);
        @include grid(4);
        @include omega;
      }
    }
  }

  .input{
    margin-bottom: 20px;
    width: 100%;
    @include clearfix;

    &.boolean{
      label{
        font-size: 12px;
        font-weight: $bold;
        text-transform: lowercase;
      }

      input{
        margin-right: 10px;
      }
    }

    input.string,
    input.password,
    textarea.text{
      width: 100%;
      border: 1px solid $input-border-color;
      padding: 5px;
      font-size: 12px;
      color: $gray-main;
      -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
              border-radius: 5px;

      &::-webkit-input-placeholder{
        color: $gray-main;
      }

      &::-moz-placeholder{
        color: $gray-main;
      }

      &.small{
        @include grid(3);
        @include alpha;
      }
    }

    span.error {
      font-size: 12px;
      font-weight: $normal;
      color: red;
    }
  }

  footer{
    overflow: hidden;
    width: 100%;
    text-align: center;
    border-top: 1px solid $footer-border-color;
    padding-top: 20px;

    .btn{
      &:first-child{
        @include alpha;
      }

      @include push(6);
    }
  }
}