//
// This file defines most styles of the CMS: Colors, fonts, backgrounds,
// alignments, dimensions.
//
// Use SCSS variable definitions in screen.css to avoid repeating styles
// like background colours or padding dimensions. See themes/_default.scss
// to get started.
//
// To avoid this file getting too large and complicated, it is encouraged to
// create new SCSS files for larger components like the CMS menu or tree
// (see _tree.scss and _menu.scss).

// ----------------------------------------------------
// Core Styles.
// ---------------------------------------------------- */

html, body {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}

// --------------------------------------------
// Helpers
// --------------------------------------------

.hide {
  display: none;
}

.cms-helper-hide-actions .btn-toolbar {
  display: none;
}

// --------------------------------------------
// Panels Styles
// --------------------------------------------
.cms-container {
  display: flex;
  height: 100%;
  width: 100vw;
  background: $body-bg;
}

.cms-container--content-mode {
  .cms-preview {
    display: none;
  }
}

.cms-container--split-mode {
  .cms-content .preview-mode-selector {
    display: none;
  }
}

.cms-container--preview-mode {
  .cms-content {
    display: none;
  }

  .cms-preview {
    border-left: 0;
  }
}

// .cms-preview,
// .cms-menu,
// .cms-content,
// .cms-content-header,
// // DEPRECATED:
// // .cms-content-tools will be removed in 4.0
// // Use .cms-content-filters instead
// .cms-content-tools,
// .cms-content-fields,
// .cms-preview,
// .cms-preview iframe,
// .cms-preview-controls {
//   display: inline-block;
// }

.cms-content-header {
  position: relative;
  padding-left: $panel-padding-x;
  padding-right: $panel-padding-x;
  min-width: 100%;
  z-index: $zindex-cms-content-header;
  min-height: $toolbar-total-height;
  background-color: $body-bg-dark;
  border-bottom: 1px solid $border-color;

  .backlink {
    span.btn-icon-back {
      height: 16px;
    }
  }

  h2 {
    font-size: $h4-font-size;
    font-weight: bold;
    margin: 0;
    margin-bottom: map_get($spacers, 2);

    * {
      vertical-align: middle;
    }
  }

  .cms-content-header-info {
    min-height: $toolbar-height;
    min-width: 250px;

    & * {
      display: inline-block; // align back button and breadcrumbs
    }

    .section-icon {
      opacity: 0.2;
      background-repeat: no-repeat;
    }

    .view-controls .btn {
      margin-right: -10px;
    }
  }

  // Reset to default styles
  .ss-ui-button {
    line-height: calc($spacer / 1.5);

    .ui-button-text {
      line-height: 1.4;
    }
  }
}

.cms-content-header {
  width: 100%;
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;

  @include media-breakpoint-down(sm) {
    .cms-content-header-nav {
      display: block;

      > .cms-content-header-nav__left {
        height: $toolbar-height;
      }
    }

    // CMS admin
    .cms-content-header-nav .breadcrumbs-wrapper,
    .cms-content-header-nav .cms-content-header-tabs,
      // Model admin
    .breadcrumbs-wrapper,
    .cms-content-header-tabs,
    .cms-content-header-info {
      float: none;
    }
  }
}

.cms-edit-form.CMSMain {
  padding: 0;
}

// Hide threeColumnCompressor column.
.cms-container {
  .column-hidden {
    display: none;

    & + .cms-preview {
      border-left: 0;
    }
  }
}

.cms-content-header-top {
  display: inline-block;
  width: 100%;
}

// We have a faux three column layout when displaying Page content in the CMS.
.has-panel {

  .cms-versions-form {
    padding: $grid-gutter-width-half $grid-gutter-width-half $grid-gutter-width-half $grid-gutter-width-half;
  }

  .cms-content-header.north {
    &.collapsed {
      .cms-content-header-info {
        width: 60px;
      }

      .view-controls,
      .section-label {
        display: none;
      }

      .cms-content-header-nav {
        margin-left: 61px;
      }
    }
  }

  .section-heading {
    padding-left: 4px;
  }

  .section-icon {
    vertical-align: top;
    margin-top: 3px;
  }

  .section-label {
    vertical-align: middle;
    font-size: 1.2em;
    font-weight: normal;
  }
}

.view-controls {
  margin-left: auto;

  .icon-button-group {
    .icon-button {
      padding: 6px 8px;
      height: 26px;
    }
  }
}

.cms-content-tools.collapsed .cms-panel-content > * {
  display: none;
}

// History checkboxes
.cms-versions-form {
  .form-group::after {
    visibility: hidden;
    margin: 0;
  }

  .checkbox {
    margin-bottom: 0;
  }
}


/** ------------------------------------------------------------------
 * CMS Breadcrumbs
 * ----------------------------------------------------------------- */
.breadcrumbs-wrapper {
  width: 250px; // to enable flexbox auto-grow
  overflow: hidden;
  flex: 1;

  @include media-breakpoint-down(sm) {
    margin-left: $toolbar-total-height;

    .toolbar__back-button + & {
      margin-left: 0;
    }
  }

  .crumb,
  .sep {
    font-size: $font-size-xs;
    line-height: 18px;
    font-weight: normal;
    white-space: nowrap;
  }

  .crumb {
    &.last {
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      padding: 10px 0;
      font-size: 1.2em;
    }
    .sep {
      padding-top: 8px;
      padding-bottom: 8px;
    }
  }

  .sep + {
    .crumb.last {
      padding-top: 0;
      padding-bottom: 0;
    }
  }
}

.cms-tabset-nav-primary {
  display: inline-block;
  vertical-align: middle;
}

/** ------------------------------------------------------------------
 * Buttons that use font icons.
 * There are !important rules here because we need to override some Tab styling.
 * It's tidier to have some !important rules here than have the Tab styles
 * littered with load of context specific rules for icon-buttons.
 * Icon buttons styles should always take presedence over Tab styles.
 * Tabs should be refactored to use weaker selectors.
 * ----------------------------------------------------------------- */

.ui-button-text-only .ui-button-text {
  padding-left: 0;
}

.cms {
  a.icon-button,
  button.ss-ui-button.icon-button {
    vertical-align: middle;
    margin: 0 2px 0 0;
    padding: 6px 8px;
    font-size: 14px;
    text-indent: 0;
    text-shadow: none;
    line-height: 1em;
    color: $body-color;
    background-color: transparent;
    background-image: none;
    border: 0;

    &:hover,
    &:active,
    &:focus {
      border: 0;
      box-shadow: none;
      background-image: none;
      text-decoration: none;
    }

    &:hover {
      background-color: #d4dbe1;
    }

    &.active,
    &:active {
      background-color: #d4dbe1;
    }

    &.font-icon-search {
      padding: 5px 6px;
      color: lighten($body-color, 10%);

      &.active,
      &:active,
      &:focus,
      &:hover {
        color: darken($body-color, 10%);
      }

      &:before {
        font-size: 18px;
        margin-left: 1px;
        margin-right: 0;
      }
    }

    .ui-button-text {
      display: none;
    }

    .ModelAdmin & {
      margin-top: -11px;
    }
  }
}

// Context specific overrides for Tabs.
.ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-active a.icon-button.cms-panel-link,
.ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-default a.icon-button.cms-panel-link {
  padding: 5px 8px 6px;
  line-height: 1em;
  background-color: transparent;
  background-image: none;
  border: 0;

  &:before {
    vertical-align: middle;
  }
}

.cms-content-header-tabs .icon-button-group > .ui-tabs-nav.cms-tabset-nav-primary {
  margin-top: 0;
}

.icon-button-group {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #CDCCD0;
  border-radius: 4px;

  a.icon-button,
  button.ss-ui-button.icon-button {
    margin-right: 0;
    line-height: 13px;
    border-radius: 0;

    &:first-child {
      border-radius: 3px 0 0 3px;
    }

    &:last-child {
      border-radius: 0 3px 3px 0;
    }

    &:hover {
      background: $body-bg;
    }

    &.active:hover {
      background: #d4dbe1;
    }

    + a.icon-button,
    + button.ss-ui-button.icon-button {
      border-left: 1px solid #CDCCD0;
    }
  }

  // Context specific overrides for Tabs.
  .ui-tabs.ui-tabs-nav {
    border-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0;
    overflow: hidden;

    .cms-tabset-icon.ui-state-default {
      background-color: transparent;
      background-image: none;
      margin: 0;
      padding: 0;
      border-left: 0;
      border-right: 0;
      box-shadow: none;

      + .cms-tabset-icon.ui-state-default {
        border-left: 1px solid #CDCCD0;
      }

      &:hover {
        background: $body-bg;
      }

      &.ui-state-active:hover {
        background: #d4dbe1;
      }
    }

    .cms-tabset-icon.ui-state-active {
      background-color: #d4dbe1;
    }
  }

  .cms-content-header-tabs & {
    overflow: hidden;
  }
}

// --------------------------------------------
// Tabs
// -------------------------------------------- */

.ui-tabs {
  padding: 0;
  background: none;

  .ui-tabs-panel {
    padding: 0;
    background: transparent; // default it's white
    border: 0; // suppress default borders

    &.cms-edit-form {
      padding: 0;
      display: flex;
    }

    .ui-tabs .ui-tabs-nav {
      float: none;
      border-bottom: 1px solid $nav-tabs-link-hover-border-color;
      margin-bottom: $panel-padding-y;
    }
  }

  .ui-tabs {
    position: static;
  }

  .ui-tabs-panel {
    .toolbar--content {
      margin-left: -20px;
      margin-right: -20px;
      padding-left: 20px;
      padding-right: 20px;
    }

    .alert + .grid-field {
      margin-top: $panel-padding-y;
    }
  }

  .ui-widget-header {
    border: 0;
    background: none;
  }

  .ui-tabs-nav {
    float: right;
    margin: map_get($spacers, 2) 0 $panel-padding-y 0;
    padding: 0;
    border-bottom: 0;

    .toolbar & {
      margin-bottom: -1px;
    }

    ~ .ui-tabs-panel {
      clear: both;
    }

    li {
      top: 0;
      float: left;
      margin-top: 0;

      &:active {
        outline: none;
      }

      a {
        display: inline-block;
        outline: none;
        float: none;
        color: $text-muted; // Override JQueryUI
        padding: $nav-link-padding;
        line-height: 20px; // Fix to ensure header extends to predictable size
      }

      &:last-child {
        // correctly right-align last tab
        margin-right: 0;
      }

      & + li {
        margin-left: map_get($spacers, 2);
      }
    }

    // JQuery UI override
    li.ui-tabs-active,
    li.ui-state-default,
    li.ui-state-active {
      margin-bottom: -1px;
      padding-bottom: 0;
    }

    .ui-state-default {
      border: 0;
      background: transparent;
    }

    li.cms-tabset-icon.ui-corner-top {
      text-indent: -9999em;

      a {
        display: block;
        padding-left: 40px; // Icon width
        padding-right: 0;
        margin: 0;
      }
    }

    .cms-panel-padded {
      .ui-tabs-panel {
        padding: 0; // Avoid double padding with parent

        .ui-tabs-panel {
          padding: map_get($spacers, 2) 0 0 0;
        }
      }

      .btn-toolbar {
        padding: 0; // Avoid double padding with parent
      }
    }

    &.ss-tabset-tabshidden .ui-tabs-panel {
      border-top: 0;
    }
  }
}

/**
 * Primary styles which sit on top right of screen.
 */
.ui-tabs.cms-tabset-primary .ui-tabs-nav,
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary,
.ui-tabs .cms-content-header-tabs .ui-tabs-nav {
  margin-top: #{0 - map_get($spacers, xs)}; // Same as toolbar padding
  float: none; // parent container is already right floated
  margin-bottom: 0;

  li {
    margin-right: 0; // tabs are directly adjacent
    margin-top: 0;
  }

  .ui-corner-all,
  .ui-corner-top,
  .ui-corner-right,
  .ui-corner-tr,
  .ui-corner-tl {
    border-radius: 0;
  }

  .ui-state-default {
    background: none;
    border-top: 0;
    border: 0;

    .ui-tabs-anchor:hover,
    .nav-link:hover {
      border-bottom: $nav-tabs-link-border-width solid $nav-tabs-link-hover-border-color;
    }
  }

  .ui-state-active {
    box-shadow: none;
    background: transparent;
    border: 0;
    z-index: 2;

    a,
    .nav-link,
    .nav-link:hover {
      border-bottom: $nav-tabs-link-border-width solid $nav-tabs-link-active-color;
      padding: $nav-link-padding;
    }
  }
}

.cms-content-header-tabs {
  margin-top: 0;
  padding-top: map_get($spacers, xs); // Same as toolbar padding
  min-height: $toolbar-height;

  &.icon-button-group-tabs {
    margin-top: 12px;
    margin-bottom: 13px;
  }

  .btn {
    vertical-align: top;
  }
}

.panel {
  overflow: hidden;
}

.panel--padded .ui-tabs-nav {
  float: none;
  padding: 0;
  border-bottom: 1px solid $btn-secondary-border;
  margin-top: -$panel-padding-y;

  li {
    // Align tab content with gutter (supports multiple rows of tabs)
    margin: 0 0 -1px;

    & + li {
      margin-left: map_get($spacers, 2);
    }
  }

  .nav-link {
    padding: $nav-link-padding;
  }
}

.validationerror .panel--padded .ui-tabs-nav {
  margin-top: -$panel-padding-y;

  .tab-attention {
    color: $state-draft;
    position: absolute;
    margin-top: 12px;
    margin-left: -4px;
  }
}

// -----------------------------------------------
// Loading Screen
// ------------------------------------------------ */
.ss-loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: $blue;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 100000;
  background: $body-bg;

  &__text {
    color: $blue;
    position: relative;
    font-weight: normal;
    margin: $spacer * 6 $spacer 0 $spacer * 1.5;
  }

  &__dots {
    display: inline-block;
    margin-left: .1em;

    &#{&} { // overrides the svg:not(:root) selector without !important
      overflow: visible;
      vertical-align: baseline;
    }
  }

  &__dot {
    fill: $blue;
    opacity: 1;

    $dot-animation--timing: .5s;
    $dot-animation: dot__animate $dot-animation--timing cubic-bezier(.445, .05, .55, .95) infinite alternate both;

    @keyframes dot__animate {
      0% {
        opacity: 0;
      }
      75% {
        opacity: 1;
      }
      100% {
        opacity: 1;
      }
    }

    &--1 {
      animation: $dot-animation;
    }
    &--2 {
      animation: $dot-animation ($dot-animation--timing * .33);
    }
    &--3 {
      animation: $dot-animation ($dot-animation--timing * .66);
    }
  }

  noscript {
    z-index: 1; // Above loading indicator
  }

  .nojs-warning {
    text-align: center;
    margin-top: -$spacer;
  }
}

/** --------------------------------------------
 * Actions
 * -------------------------------------------- */

.cms-content-actions {
  margin: 0;
  z-index: $zindex-cms-content-actions;
  border-top: 1px solid $border-color;
  height: $toolbar-total-height;
  min-height: $toolbar-total-height;
  max-height: $toolbar-total-height;
  background-color: $body-bg;
  padding: map_get($spacers, xs) 0;

  &.south .btn-toolbar {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/** --------------------------------------------
 * Messages
 * -------------------------------------------- */
.alert {
  &.good {
    @extend .alert-success;
  }

  &.notice {
    @extend .alert-info;
  }

  &.warning {
    @extend .alert-warning;
  }

  &.error,
  &.bad,
  &.required,
  &.validation {
    @extend .alert-danger;
  }
}

.message { // White
  display: block;
  clear: both;
  margin-bottom: $spacer;
  padding: $alert-padding-y $alert-padding-x;
  border: $alert-border-width solid #ccc;
  background: #fff; // for browsers that don't understand rgba
  background: rgba(#fff, 0.5);
  @include border-radius($alert-border-radius);

  .panel--padded > & {
    margin-bottom: $grid-gutter-width-half;
  }

  &.notice {
    background-color: lighten($color-notice, 22%); // Blue
    border-color: $color-notice;
  }
  &.warning { // Yellow
    background-color: lighten($color-warning, 47%);
    border-color: $color-warning;
  }
  &.error, &.bad, &.required, &.validation { // Red
    background-color: lighten($color-error, 24%);
    border-color: $color-error;
  }
  &.good { // Green
    background-color: lighten($color-good, 40%);
    border-color: $color-good;
  }

  // Improve alignment and spacing of inner content
  > p,
  > ul {
    margin-bottom: 0;
  }
  > p + p {
    margin-top: 5px;
  }
}

.cms-edit-form .ui-tabs-panel .message {
  margin: 0 0 $spacer; // gets padding from tab panel
}

.notice-item {
  border-radius: 3px;
  font-family: inherit;
  font-size: inherit;
  padding: 6px 24px 8px 10px;
  word-wrap: break-word;
  min-height: 60px;
  height: auto;
  border: 0;
  border-left: 3px solid;
  color: #666;
  left: 0;
  background: #fff;
  box-shadow: $z-depth-1;

  &.success,
  &.good,
  &.green {
    border-color: $color-good;
  }

  &.notice,
  &.info,
  &.blue {
    border-color: $color-notice;
  }

  &.warning,
  &.caution,
  &.yellow {
    border-color: $color-warning;
  }

  &.bad,
  &.error,
  &.red {
    border-color: $color-error;
  }

  p {
    margin-bottom: 0;
  }
}

.notice-item-close {
  font-size: 0; // hide the textNode "x" that jquery.notice.js inserts
  opacity: .8;

  &:hover {
    opacity: 1;
  }

  // apply relevant styles from .font-icon-cancel
  &::before {
    content: "\44";
    font-size: 15px;
    font-family: silverstripe, sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
  }
}

/** --------------------------------------------
 * "Add page" dialog
 * -------------------------------------------- */

.cms-page-add-form-dialog {
  display: none;
}

.cms-add-form {
  .message-restricted {
    display: none;
  }

  .radio {
    margin-left: -$panel-padding-x;
    margin-right: -$panel-padding-x;
    margin-bottom: 0;
    padding: $spacer-sm #{$spacer * 2};

    &:hover,
    &.selected {
      background-color: $body-bg-dark;
      cursor: pointer;
    }

    &.disabled {
      color: $text-muted;
      opacity: 0.6;
    }

    &.disabled:hover {
      background: none;
    }
  }

  input[type="radio"] {
    position: static;
    margin-top: 0;
    margin-right: 10px;
  }

  .page-icon {
    display: inline-block;
    margin-right: 6px;

    + .title {
      margin-right: 6px;
      font-weight: 500;
    }
  }

  .form-check-label {
    display: flex;
    align-items: center;
  }

  .form__field-description {
    font-style: italic;
    margin: 1px 0 0;
  }
}

/** --------------------------------------------
 * Content toolbar
 * -------------------------------------------- */

.cms-content-toolbar {
  &.toolbar {
    // Override bootstrap .toolbar width: 100%
    width: auto;
  }

  .cms-tree-view-modes {
    float: right;
    padding-top: (map_get($spacers, 2) - 3);

    * {
      display: inline-block;

      label {
        color: $link-color;
      }
    }
  }

  .cms-actions-tools-row {
    clear: both;
    margin-top: map_get($spacers, xs);
  }

  .tool-action {
    display: none;
  }
}

.ui-widget-content a.btn-primary {
  color: $white;
}

/**
 * DEPRECATED:
 * .cms-content-tools and ui-widget will be removed in 4.0
 * Use .cms-content-filters instead.
 *
 * Content Tools is the sidebar on the left of the main content
 * panel
 */
.cms-content-tools {
  background: $body-bg;
  width: $cms-panel-sm;
  box-shadow: 1px 0 0 0 $border-color-dark;
  z-index: 80;
  position: relative;

  &.collapsed .cms-content-header {
    padding-left: 0;
    padding-right: 0;
  }

  .cms-content-header-info {
    height: 100%;
    float: none;
  }

  .cms-panel-header {
    clear: both;
    margin: 10px 0 (map_get($spacers, 2) - 1);
    padding-bottom: 2px;
    line-height: $spacer * 1.5;
    border-bottom: 1px solid $border-color;
  }

  .cms-panel-content {
    width: $cms-panel-sm;

    .btn-toolbar .ss-ui-action-constructive {
      margin-right: 5px; //accounts for the scrollbar in the filter - keeps the actions on one line instead of wrapping onto two.
    }
  }

  h3, h4, h5 {
    font-weight: bold;
    line-height: $spacer;
  }
  h3 {
    font-size: $h5-font-size;
  }

  h4 {
    font-size: $h5-font-size;
    margin: 5px 0;
  }

  .ui-widget-content {
    background: none;
  }

  .field {
    &.checkbox {
      padding: 0 0 8px;
    }

    .description {
      margin-left: 0;
    }
  }

  table {
    margin: 8px #{-$panel-padding-x};
    width: calc(100% + #{$panel-padding-x * 2});

    tr {
      &.active {
        background-color: $component-active-bg;
        color: $white;
        border-top: 2px solid $component-active-bg;
      }
      + .active td {
        border-color: $component-active-bg;
      }
    }

    th {
      font-weight: bold;
    }
  }

  td,
  th {
    border-bottom: 1px solid $border-color;
    padding: (map_get($spacers, 2) - 1) 2px;
    font-size: 11px;
    vertical-align: top;

    &.first-column {
      padding-left: $panel-padding-x;
    }
    &.last-column {
      padding-right: $panel-padding-x;
    }
  }
}

/** ------------------------------------------------------------------
* CMS notice, used for filter messages, but generic enough to use elsewhere
* ----------------------------------------------------------------- */

.cms-notice {
  display: block;
  margin: 0 0 8px;
  padding: 10px 12px;
  font-weight: normal;
  border: 1px solid $border-color-light;
  background: #fff; //for browsers that don't understand rgba
  background: rgba(#fff, 0.5);
  text-shadow: none;
}

.cms-tree-filtered {
  margin: 0;
  box-sizing: border-box;
  margin-left: -$panel-padding-x;
  margin-right: -$panel-padding-x;
  margin-bottom: -$panel-padding-y;
  padding: $panel-padding-y $panel-padding-x;
  background: lighten(#D4E2EC, 4);
  text-shadow: none;
  border: 0;

  > strong,
  > a {
    font-size: 14px;
  }
}

// Tree batch actions
.cms-batch-actions {
  position: relative;
  max-width: 400px;

  fieldset {
    width: 100%;
    float: left;
  }

  .form__field-holder--no-label {
    margin-left: 0 !important;
    flex-basis: 100% !important;
    padding-right: 40px;
  }

  .dropdown { // The 'select' element
    width: 100%;
    height: 32px;
  }

  .chosen-container-single .chosen-single {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .field .chosen-container-active.chosen-with-drop .chosen-single {
    border-top-right-radius: 0;
  }

  .toolbar & {
    .btn-toolbar {
      position: absolute;
      right: 0;
      margin-left: 0;
      margin-right: 0;

      > btn {
        margin-left: 0;
      }
    }
  }

  .action,
  .btn {
    padding-top: 7px;
    padding-bottom: 7px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: calc(#{$grid-gutter-width} + 1px); // gutters + 1px border
  }

  // Action parameter fields
  .action-parameters {
    .form__field-description {
      margin-bottom: 0;
    }

    .field {
      height: auto;
    }

    .field:last-child {
      margin-bottom: 0;
    }

    .form__field-holder--no-label {
      padding-right: 0;
    }
  }
}

/** --------------------------------------------
 * Member Profile
 * -------------------------------------------- */

form.member-profile-form {

  #Root_Permissions {
    clear: both;
    border-top: 1px solid darken(#d9d9d9, 20%);
  }

  #Root_Main {
    clear: both;
    border-top: 1px solid darken(#d9d9d9, 20%);
  }

  .advanced h4 {
    margin-bottom: .5em;
  }

  .btn-toolbar {
    text-align: left;
    border: 0;
  }
}

// Remove border after import form
// Could be replaced with .form--no-dividers
.import-form .form-group {
  padding-bottom: 0;

  &::after {
    visibility: hidden;
    content: "";
    display: none;
  }
}

.cms {
  .cms-content {
    background: $body-bg;
    height: 100%;
  }

  .cms-content-fields {
    // always show a y scroll bar as popups like TreeDropdowns
    // can trigger longer pages and the extra scroll bar doesn't fire our sizing bar
    overflow-y: auto;
    background: transparent;

    #Root_Main {
      .confirmedpassword {
        border-bottom: none;
        box-shadow: none;
      }

      .customFormat {
        max-width: 100px;
        padding-top: 0;
        padding-bottom: 0;
      }

      .cms-help-toggle {
        text-indent: -9999em;
        display: inline-block;
        width: 20px;
        background: url('../../images/question.png') no-repeat 0px 0px;
      }
    }

    #Root_Permissions ul.optionset li {
      float: none;
    }
  }

  form.member-profile-form {
    #Root .ui-tabs-nav {
      display: none;
    }

    #Root_Main, #Root_Permissions {
      border: none;
    }
  }
}

/** --------------------------------------------
 * "Settings" Form
 * -------------------------------------------- */
#CanViewType, #CanEditType, #CanCreateTopLevelType {
  .optionset li {
    // All options on their own line
    float: none;
    width: auto;
    white-space: nowrap;
  }
}

#ViewerGroups,
#EditorGroups,
#CreateTopLevelGroups {
  select {
    // Fix for chosen.js width detection on hidden elements.
    width: $spacer * 32;
  }
}

/** --------------------------------------------
 * Panels
 * -------------------------------------------- */

.cms-panel {
  .cms-panel-toggle {
    display: flex;
    justify-content: flex-end;
    padding: 0;

    .toggle-collapse,
    .toggle-expand {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: right;
      text-decoration: none;

      &:hover {
        background-color: $base-menu;
      }

      span {
        display: inline-block;
        margin: 0 8px;
        color: $gray-600;
        font-size: 18px;
      }
    }

    .toggle-collapse {
      display: flex;
    }

    .toggle-expand {
      display: none;
    }
  }

  &.collapsed {
    cursor: pointer;

    .cms-panel-header *,
    .cms-panel-toggle a.toggle-collapse {
      display: none;
    }

    .cms-panel-toggle a.toggle-expand {
      display: flex;
      width: auto;
    }
  }

  .cms-panel-header {
    width: 100%;
  }

  &#cms-content-tools-CMSPageEditController .cms-panel-content-collapsed {
    width: $cms-panel-xs;
    display: none; // Avoids FOUC

    h2, h3 {
      border-bottom: 0;
      margin-left: map_get($spacers, 2);
      transform-origin: bottom, right;
      transform: rotate(270deg);
    }
    .cms-panel-header {
      width: 600px;
      position: relative;
      top: 24px;
      right: 577px;
      text-align: right;
    }
  }

  .cms-panel-content-collapsed {
    width: 60px;
    display: none; // Avoids FOUC
    height: calc(100% - #{$toolbar-height});
    overflow: hidden;

    h2,
    h3 {
      border-bottom: 0;
      margin-left: 18px;
      transform-origin: bottom right;
      transform: rotate(270deg);
    }

    .cms-panel-header {
      width: 600px;
      position: relative;
      right: 574px;
      text-align: right;
      border-bottom: 0;
      box-shadow: none;
      margin-top: -5px;
    }
  }
}

.cms .cms-panel-padded .cms-content-view {
  padding: $panel-padding-y $panel-padding-x;
  height: 100%; // For horizontal scrollbar on Pages sitetree at smaller sizes
}

.CMSPageAddController .cms-panel-padded {
  padding: $panel-padding-y $panel-padding-x;
}

/** ------------------------------------------------------------------
* Dialog
*
* Contained in a jQuery UI dialog ('.ui-dialog'), with either inline
* markup (for the "insert" dialogs), or an iframe (for member profile).
* ----------------------------------------------------------------- */

// overlay for switching between CMS panes
.cms .ui-widget-overlay-light {
  opacity: 0.15;
  background-color: #000;
}

// Adjusting the color of the background overlay to be darker for pop-up dialogs (created by jQuery-UI)
.cms .ui-widget-overlay {
  background-color: #000;
  background-image: none;
}

.cms .ui-dialog .ss-ui-dialog.ui-dialog-content {
  padding-top: 0px; //removes padding so that tabs are flush with header
}

// Elements with this class can either frame inline markup or an iframe,
// most styles should be applied to .cms-dialog instead (which declares the content in the frame)
.ui-dialog {
  background: $body-bg;
  background-clip: content-box;
  border: 1px solid #666 !important;
  border-radius: map_get($spacers, 2);
  overflow: visible;
  padding: 0;
  box-shadow: 0px 0px 30px 10px rgba(0, 0, 0, .3);

  // Titlebar for pop-up dialog.
  .ui-dialog-titlebar.ui-widget-header {
    font-size: $font-size-root (+1);
    padding: 0;
    border: 0;
    background: transparent url('../../images/textures/cms_content_header.png') repeat;
    box-shadow: $shadow-level-4 0 0 map_get($spacers, 1) inset;

    .ui-dialog-title {
      position: absolute;
    }
  }

  .-content {
    border-radius: map_get($spacers, 2);
    overflow: auto;

    &.loading {
      background-image: url('../../images/spinner.gif');
      background-position: 50% 50%;
      background-repeat: no-repeat;
    }
  }

  .cms-dialog-content {
    background: $body-bg;
    padding-bottom: map_get($spacers, 2);
    padding-top: 0;

    .btn-toolbar {
      overflow: auto;
      padding-bottom: map_get($spacers, 2);
      float: right;
    }

    .ui-tabs {
      position: static;
      // Shift navigation upwards to be horizontally centered with dialog title.
      // Can't use floats since this title is in a different DOM parent sibling
      // Note: Does NOT apply to member profile form (unnecessary, since it doesn't have a dialog title)
      .ui-tabs-nav {
        position: absolute;
        top: 9px;
        // Tabs nav is included in scollbar. By absolutely positioning it off the edge,
        // we avoid tabs shifting position when scrollbar toggles
        right: 40px;
      }

      // Don't show top border, since these styles already have a title bar
      .ui-tabs-panel {
        border: 0;
      }
    }

    .clear {
      clear: both;
    }
  }

  &.loading {
    background-image: url('../../images/spinner.gif');
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }

  .ui-dialog-buttonpane {
    margin: 0;
    background: $body-bg;
    border-top: 1px solid $border-color-light;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
}

body.cms-dialog {
  overflow: auto;
  background: $body-bg;
  position: relative;
}

/** --------------------------------------------
 * Search forms (used in AssetAdmin, ModelAdmin, etc)
 * -------------------------------------------- */

 // Necessary for z-index to function, allows the search form to be above other elements
.search-holder {
  position: relative;
}

// Override form styling inherited from cms-edit form
.cms-edit-form {
  .cms-search-form.cms-search-form { // double selector to override without using important
    .form-group {
      margin-left: 0;
      margin-right: 0;
    }

    .form__field {
      &-label, &-holder {
        max-width: 100%;
        flex: 0 0 100%;
        padding-right: 0;
        padding-left: 0;
      }
    }
  }
}

/** --------------------------------------------
 * Step labels
 * -------------------------------------------- */
.step-label > * {
  display: block;
}

.step-label .flyout {
  color: $brand-secondary;
  font-weight: bold;
  text-transform: uppercase;
}

/** --------------------------------------------
 * Item Edit Form
 * -------------------------------------------- */

.cms-file-info {

  // Preview might not always be available
  .cms-file-info-preview img {
    max-width: calc(map_get($spacers, 2) * 22); // Same as ".field label"
    max-height: calc(map_get($spacers, 2) * 16); // Fitting typical info displayed (~5 rows)
    margin-bottom: $spacer;
  }
}

form.small {
  .cms-file-info-preview {
    width: $spacer * 7;

    img {
      max-width: $spacer * 7;
    }
  }

  .cms-file-info-data {
    // Ensure it fits beside the image preview, increased size for long url
    max-width: 550px;

    // Reduced label widths to fit everything in smaller space
    .field {
      padding-bottom: 0;

      label {
        width: $spacer * 7;
      }

      .middleColumn {
        margin-left: $spacer * 7.5;
      }
    }
  }
}

/** --------------------------------------------
 * Users Members Admin
 * -------------------------------------------- */

.members_grid {
  span button#action_gridfield_relationfind {
    display: none; //hides find button - redundant functionality
  }
  p button#action_export {
    span.btn-icon-download-csv {
      height: 17px; //exact height of icon
    }
  }
}

/** --------------------------------------------
 * Page Settings Controller
 * -------------------------------------------- */

.cms-container .CMSMain.CMSPageSettingsController .tab#Root_Settings {
  .optionset li {
    white-space: nowrap;

    label {
      padding-left: 2px;
    }
  }

  .fieldgroup .fieldgroup-field {
    width: $spacer * 13.5;
    padding-left: 0;
  }
}

/** --------------------------------------------
 * Buttons for FileUpload
 * -------------------------------------------- */
.toggle-details-icon {
  @include icon-sprites(32x32);
  @include sprite($sprites-32x32-menu-arrow-down);

  &.opened {
    @include icon-sprites(32x32);
    @include sprite($sprites-32x32-menu-arrow-up);
  }
}

/** --------------------------------------------
 * Hide preview toggle link by default.
 * May be shown js if needed.
 * -------------------------------------------- */
.cms .btn-toolbar > .cms-preview-toggle-link,
.cms .cms-navigator > .cms-preview-toggle-link {
  display: none;
}