// Submission

.submission{
  fieldset{
    position:relative;
    border:1px solid $line-color;
    padding:80px 20px 30px 20px;
    margin-bottom:25px;
    border-radius:3px;
    
    & > legend{
      position:absolute;
      top:25px;
      left:30px;
      color:$blue;
      font-size:23px;
      line-height:29px;
      font-weight:600;
      margin-bottom:5px;
      background-color:transparent;
    }
    
    &#root{
      border:none;
      padding:0;
      
      
      &:before{
        display:none;
      }
      
      & > legend{
        display:none;
      }
    }
    
    .form-group{
      margin-bottom:20px;
      
      &:last-child{
        margin-bottom:0;
      }
      
      label{
        display:block;
        font-size:14px;
        line-height:21px;
        font-weight:400;
        margin-bottom:7px;
      }
    }
    
    fieldset{
      transition-duration:0.2s;
      transition-property:border;
      
      .form-group{
        padding-left:10px;
        padding-right:10px;

        &.inline{
          width:50%;
          display:inline-block;
          vertical-align:top;

          select{
            width:100%;
            max-width:100%;
          }
        }

        &:not(.inline){
          select{
            width:100%;
            max-width:50%;
          }
        }
        
      }
    }

    .field-radio-group{
      margin-top:5px;
      
      .radio{
        display:inline-block;
        margin-right:13px;
        
        label{
          cursor:pointer;
          transition-duration:0.2s;
          transition-property:border;
          
          display:block;
          border:1px solid $grey-light;
          padding:3px 14px 8px 12px;
          border-radius:20px;
          
          &:hover{
            border-color:$input-border-hover-color;
          }
          
          &:focus{
            border-color:$input-border-focus-color;
          }
        }
        
        input{
          cursor:pointer;
          position:relative;
          top:1px;
          margin-left:0;
          margin-right:8px;
        }
        
        span{
          span{
            font-size:13px;
            line-height:19px;
            font-weight:500;
            text-transform:capitalize;
            position:relative;
            vertical-align:middle;
            top:2px;
          }
        }
      }
    }
  }
  
  button{
    @extend .button;
    
    transform-origin:0 0;
    transform:scale(0.85);
    
    &:hover{
      border-color:$blue-dark;
      background-color:$blue-dark;
    }
  }
  
  // Nested Add/Remove Fieldset
  fieldset.field-array-of-object{
    border:none;
    padding:0;
    
    &:last-of-type{
      margin-bottom:0;
      
    }
    
    fieldset{
      padding:0;
      border:none;
    }
    
    .array-item-list{
      border:1px solid $line-color;
      border-radius:3px;
      padding:30px 30px 20px 30px;
      margin-bottom:30px;
      
      &:empty{
        display:none;
      }
      
      .array-item{
        border-bottom:5px solid $line-color;
        padding-bottom:20px;
        margin-bottom:30px;
        
        &:last-child{
          border-bottom:none;
          padding-bottom:0;
          margin-bottom:0;
        }
      }
    }
    
    .array-item-toolbox{
      position:relative;
      margin-top:-10px;
    }
  }
  
  .array-item-add button,
  button.array-item-remove{
    transform-origin:0 0;
    transform:scale(0.8);
    display:inline-block;
    
    &:before{
      position:relative;
      font-size:15px;
      line-height:24px;
      font-weight:500;
    }
  }
  
  .array-item{
    .btn-group{
      display:block !important;
    }
  }
  
  .array-item-add{
    button{
      &:before{
        content:'\002B\00a0 Add';
      }
    }
  }
  
  button.array-item-remove{
    padding-left:22px !important;
    padding-right:22px !important;
    
    &:before{
      content:'\2212\00a0 Remove';
    }
  }

  .form-alert{
    position:relative;
    border:1px solid $line-color;
    padding:20px;
    margin-bottom:25px;
    border-radius:3px;
    margin-top:-25px;

    .title{
      margin-bottom:10px;

      .icon-caution,
      span{
        display:inline-block;
        vertical-align:middle;
      }

      .icon-caution{
        position:relative;
        margin-right:9px;
        top:-2px;
      }

      span{
        display:inline-block;
        vertical-align:middle;
        font-size:17px;
        font-weight:600;
        color:$black;
      }
    }

    .description{
      a{
        @include link-underline($blue, $blue, 1);
        color:$black;

        &:hover{
          color:$blue;
        }
      }
    }
  }
}

@include breakpoint($laptop-tablet){
  .submission{
    fieldset{
      .field-radio-group{
        .radio{
          label{
            padding-bottom:7px;
          }

          input{
            margin-bottom:0;
          }
        }
      }
    }
  }
}

@include breakpoint($tablet-portrait){
  .submission{
    margin-top:-10px;
    margin-left:-20px;
    margin-right:-20px;
    margin-bottom:0;
    box-shadow:0 0 0 0 rgba(0,0,0,0);
    
    fieldset{
      padding:70px 20px 20px 20px;
      
      & > legend{
        left:20px;
        font-size:20px;
      }
    }
  }
}

@include breakpoint($phone){
  .submission{
    box-shadow:0 0 0 0 rgba(0,0,0,0);
    margin-top:-20px;
    margin-left:-20px;
    margin-right:-20px;
    margin-bottom:0;
    
    & > .inner{
      padding:0;
    }
    
    .formbase{
      & > p{
        padding-left:17px;
      }
    }
    
    fieldset{
      padding:60px 17px 17px 17px;
      
      & > legend{
        top:15px;
        left:17px;
        font-size:19px;
      }
      
      &#root{
        margin-bottom:0;
      }
      
      fieldset{
        .form-group{
          padding-left:0;
          padding-right:0;

          &.inline{
            display:block;
            width:auto;

            & + .inline{
              padding-left:0;
            }
          }
          label{
            font-size:14px;
          }
        }
      }
      
      .field-radio-group{
        .radio{
          label{
            padding-top:2px;
            padding-bottom:5px;
          }

          span{
            span{
              top:1px;
            }
          }
        }
      }
    }
    
    fieldset.field-array-of-object{
      .array-item-list{
        padding:15px 15px 10px 15px;
      }
    }
    
    .form-alert{
      padding-left:17px;
      margin-top:0;
    }
  }
}
