/**
 * @file
 * Styles for Page Manager admin.
 */

/* Narrow screens */

.page-manager-wizard-tree,
.page-manager-wizard-form {
  box-sizing: border-box;
}

/**
 * Wizard actions across the top.
 */
.page-manager-wizard-actions {
  text-align: right; /* LTR */
}
.page-manager-wizard-actions ul.inline,
.page-manager-wizard-actions ul.inline li {
  display: inline-block;
  margin: 0;
}
.page-manager-wizard-actions ul.inline {
  border-top: 1px solid black;
  border-left: 1px solid black;
}
.page-manager-wizard-actions ul.inline li {
  border-right: 1px solid black;
  padding: .5em;
}

/**
 * The tree of wizard steps.
 */
.page-manager-wizard-tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-manager-wizard-tree ul > li > ul {
  margin-left: 1em;
}
.page-manager-wizard-tree > ul {
  border: 1px solid black;
  padding-bottom: .5em;
  margin-bottom: 20px;
}
.page-manager-wizard-tree li {
  border-bottom: 1px solid black;
  padding: .5em;
  padding-right: 0;
}
.page-manager-wizard-tree li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/**
 * The wizard form.
 */
.page-manager-wizard-form {
  border: 1px solid black;
  padding: 1em;
  margin-bottom: 20px;
}

/* Wide screens */
@media
  screen and (min-width: 780px),
  (orientation: landscape) and (min-device-height: 780px) {

  /**
   * Overall layout.
   */
  .page-manager-wizard-tree {
    float: left; /* LTR */
    width: 20%;
  }
  .page-manager-wizard-form {
    float: left; /* LTR */
    width: 80%;
  }
  .page-manager-wizard-form-actions {
    margin-left: 20%; /* LTR */
  }

  /**
   * Make the borders look nice.
   */
  .page-manager-wizard-tree > ul {
    border-right: 0; /* LTR */
  }
  .page-manager-wizard-form {
    min-height: 700px;
  }

  /**
   * Right-to-left support.
   */
  [dir="rtl"] .page-manager-wizard-tree,
  [dir="rtl"] .page-manager-wizard-form {
    float: right;
  }
  [dir="rtl"] .page-manager-wizard-form-actions {
    margin-left: 0;
    margin-right: 20%;
  }
  [dir="rtl"] .page-manager-wizard-tree > ul {
    border-right: 1px solid black;
    border-left: 0;
  }
}