/**
 * Override of misc/vertical-tabs.css.
 */

/* todo
 * Add nav-tabs.js from drupal 8 to extend this to tabs-primary 
 * (horizontal tabs become vertical for mobile)
 * Add a configuration option that allows an admin to select left, instead of right for the vertical tabs column
*/ 

.vertical-tabs-panes {
  margin: 0;
  padding: 0;
}
/* remove system styles */
.vertical-tabs-panes fieldset {
  border: 0px;
  background: none;
  padding: 0;
}
.vertical-tabs-panes .form-type-select {
  display: inline-block;
}

/* create the two column layout for 960+ */
@media all and (min-width: 960px) and (max-width: 5000px) {
  /* make all the form elements 65% on node and block forms 
   * TODO: this needs to be re-done with js that adds the column on admin pages where vertical tabs exist */
  form[class^='node-'] .fieldset,
  form[class^='node-'] .form-wrapper,
  form[class^='node-'] .form-item-title,
  form[id^='block-'] fieldset,
  form[id^='block-'] .form-wrapper,
  form[id^='block-'] .form-item {
    width: 65%;
    float: right; /* right column */
  }
  /* reset the width for nested form things */
  form[class^='node-'] .form-wrapper .form-wrapper,
  form[class^='node-'] .fieldset .fieldset,
  form[id^='block-'] .form-wrapper .form-wrapper, 
  form[id^='block-'] .vertical-tabs-panes .fieldset,
  form[id^='block-'] .vertical-tabs-panes .form-item,
  form[id^='block-'] .fieldset-wrapper > .form-item.form-type-select {
    width: 100%;
    float: none;
  }
  /* set the context of the region to relative so that origin for the ap column will be the bounds of the region.
   * todo: use singularity.gs grid classes for the columns instead of absolute positioning.
   */
  form[class^='node-'],
  form[id^='block-'] {
    position: relative;
  }
  /* make the tabs column for the vertical tabs */
  form[class^='node-'] .vertical-tabs-panes,
  form[id^='block-'] .vertical-tabs-panes {
    position: absolute;
    top: 0;
    left: 0; /* left column */
    padding: 0;
    margin: 0;
    width: 30%;
  }
  /* makes space for the edit visibility title in Block UI */
  form[id^='block-'] .vertical-tabs-panes {
    top: 50px;
  }
  /* Add a description for node form to create a similar appearance to block UI where there is a description above the tabs 
     todo; Accomplish this with another method that makes it translatable
  */
  form[class^='node-'] .vertical-tabs-panes:before {
    content: "Additional settings";
    font-weight: bold;
    font-size: 1em;
    line-height: 50px;
  }
  /* corrects mismatch between the text format div and the text area in the tabs column */
  form[class^='node-'] #edit-body-und-0-format {
    width: 99.1%;
  }
  #edit-body-und-0-format-help {
    float: right;
    width: auto;
  }
  form[id^='block-'] #edit-body-format {
    width: 64.444%; /* left column */
  }
  /* re-positions vertical tabs title at the top of the tabs column for Block UI, account settings */
  #edit-visibility-title,
  #edit-email-title {
    position: absolute;
    left: 0; /* left column */
    top: 0;
    width: 30%;
    padding: 0;
  }
  .text-format-wrapper > .description {
     width: 65%;
     float: left; /* left column */
  }
}

@media all and (max-width: 960px) {
  .vertical-tabs-panes {
    margin-top: 1em;
  }
}