#quadmenu-settings {

  &.quadmenu-item-carousel,
  &.quadmenu-item-tabs,
  &.quadmenu-item-mega {
    .quadmenu-tab-pane-default {
      .quadmenu-setting-description {
        display: none;
      }
    }
  }

  &.quadmenu-item-social,
  &.quadmenu-item-carousel,
  &.quadmenu-item-search,
  &.quadmenu-item-login {
    .quadmenu-tab-pane-default {
      .quadmenu-setting-description,
      .quadmenu-setting-xfn,
      .quadmenu-setting-target,
      .quadmenu-setting-url {
        display: none;
      }
    }
  }

  li.quadmenu-panel-query,
  li.quadmenu-panel-content,    
  li.quadmenu-panel-archive_carousel {
    display: none;
  }

  .quadmenu-column,
  &.quadmenu-item-depth-1,
  &.quadmenu-item-depth-2,
  &.quadmenu-item-depth-3,
  &.quadmenu-item-depth-4 {
    li.quadmenu-panel-query,
    li.quadmenu-panel-content,    
    li.quadmenu-panel-archive_carousel {
      display: block!important;
    }
  }

  .quadmenu-column {
    .quadmenu-setting-dropdown,
    .quadmenu-setting-float {
      display: none!important;
    }
  }

  .quadmenu-setting-depth-0,
  .quadmenu-setting-depth-1,
  .quadmenu-setting-depth-2,
  .quadmenu-setting-depth-3,
  .quadmenu-setting-depth-4 {
    display: none;
  }

  &.quadmenu-item-depth-0 {

    .quadmenu-setting-depth-0 {
      display: block;
    }

  }

  &.quadmenu-item-depth-1,
  .quadmenu-item-depth-1 {

    .quadmenu-setting-depth-1 {
      display: block;
    }

  }

  &.quadmenu-item-depth-2,
  .quadmenu-item-depth-2 {

    .quadmenu-setting-depth-2 {
      display: block;
    }

  }

  &.quadmenu-item-depth-3,
  .quadmenu-item-depth-3 {

    .quadmenu-setting-depth-3 {
      display: block;
    }

  }

  &.quadmenu-item-depth-4,
  .quadmenu-item-depth-4 {

    .quadmenu-setting-depth-4 {
      display: block;
    }

  }

  .dashicons {
    //line-height: inherit;
    width: auto;
    height: auto;
    padding: 0;
    vertical-align: middle;
  }

  margin: -1px -10px -11px -10px;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;

  &.saving {
    .quadmenu-settings-header .quadmenu_saving {
      display: block;
    }
  }

  input,
  select, 
  textarea {
    border-radius: 2px;
    height: auto;
    margin: 0;
    box-shadow: none;

    &:not(.button) {
      padding: 7px 10px;
    }
  }

  input[type=text],
  input[type=password],
  select, 
  textarea {
    width: 100%;
    max-width: 600px;
  }

  .button-primary {
    &:extend(body.admin-color-quadmenu .redux-container .button);
    &:extend(body.admin-color-quadmenu .redux-container .button-primary);
  }

  .quadmenu-settings-body {
    position: relative;
  }

  .quadmenu-settings-footer,
  .quadmenu-settings-header {
    position: relative;
    overflow: hidden;
    padding: 15px;
  }

  .quadmenu-settings-header {

    background-color: rgb(241, 241, 241);
    border-bottom: 1px solid #ececec;

    .quadmenu-title {
      margin: 0;
      line-height: 30px;

      > i {
        margin: 0 5px 0 0;
      }
    }

    .quadmenu_close {
      float: right;
    }

    .quadmenu_saving {
      font-size: 12px;
      text-align: right;
      padding: 0 20px;
      display: none;
      line-height: 60px;
      text-transform: uppercase;
      color: white;
      font-size: 11px;
      font-weight: bold;
      background: #21c2f8;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;

      &:before {
        color: white;
        display: inline-block;
        font: normal 20px 'dashicons';
        speak: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        vertical-align: top;
        margin-right: 5px;
        content: '\f463';
        -webkit-animation: rotation 2s infinite linear;
        animation: rotation 2s infinite linear;
        line-height: inherit;
        /* z-index: -1; */
        /* border-top-right-radius: 5px; */
        border-radius: 5px;
        /* display: block; */
      }

    }

  }

  .quadmenu-setting {
    padding: 15px 0;
    //padding: 15px;
    border-bottom: 1px solid #eee;

    &:first-of-type {
      padding-top: 0;
    }

    &:last-of-type {
      border-bottom: none;
    }

    span.title {
      display: block;
      margin: 0 0 5px 0;
      font-weight: 700;
    }

    span.description {
      display: block;
      margin: 5px 0 0 0;
    }

    .field-wrapper {
      label {
        display: block;
        line-height: 25px;

        input[type=checkbox],
        input[type=radio] {
          margin: -2px 5px 0 0;
        }
      }
    }

    &.quadmenu-setting-actions {
      .button {
        padding: 0 15px;
      }
    }

    &.quadmenu-setting-background,
    &.quadmenu-setting-media {

      .field-wrapper {
        &.active {
          .edit-menu-item-media-thumbnail:before {
            display: none;
          }
          .menu-item-media-clear {
            display: inline;
          }
        }

        .edit-menu-item-media-thumbnail:before {
          .dashicons();                
          line-height: 50px;
          content: "\f128";
          font-family: dashicons;
        }
        .menu-item-media-clear {
          display: none;
        }

        .edit-menu-item-media-thumbnail,
        .edit-menu-item-media-text,
        .edit-menu-item-media-css {
          display: block;
          overflow: hidden;
        }

        .edit-menu-item-media-css {
          display: block;
          overflow: hidden;
          line-height: 1;
          margin: 0;
          font-size: 10px;
          text-align: right;
        }

        .edit-menu-item-media-thumbnail {
          float: left;
          width: 50px;
          height: 50px;
          background: #ccc;
          margin: 0 10px 0 0;
          text-align: center;
          font-size: 20px;
          color: #aaa;
        }
      }

    }

    &.quadmenu-setting-media {

      .field-wrapper {
        background: #eee;
        display: block;
        overflow: hidden;
        padding: 5px;
        border: 1px solid #ddd;
      }
    }

    &.quadmenu-setting-background {

      position: relative;
      padding: 15px;

      .field-background {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        //padding: 15px;
        opacity: 0.2;
      }

      .setting {
        display: block;
        padding: 10px 0;
        b {
          display: block;
        }

        select {
          min-width: 200px;
          width: auto;
        }
      }
    }

    &.quadmenu-setting-width {

      > label {
        display: flex;
        //padding: 0 15px;

        > .quadmenu-setting-width-icons,
        > .quadmenu-setting-width-columns,
        > .quadmenu-setting-width-offset,
        > .quadmenu-setting-width-hidden {
          flex: auto;

          > div {
            padding: 0 20px;
            line-height: 70px;
            height: 70px;

            &:not(:last-child) {
              border-bottom: 1px solid #efefef;
            }

            > i,
            > select,
            > input {
              margin: 0;
            }
            > select {
              margin: 0 0 3px 0;
            }
          }
        }

        > .quadmenu-setting-width-icons,
        > .quadmenu-setting-width-offset,
        > .quadmenu-setting-width-hidden {
          max-width: 60px;
        }

        > .quadmenu-setting-width-hidden {
          text-align: center;
        }

        > .quadmenu-setting-width-icons {

          > div {

            > i {
              background: transparent url('../../backend/images/offset.png') -21px 0 no-repeat;
              width: 21px;
              height: 21px;
              display: inline-block;
              vertical-align: middle;
            }

            &.md > i {
              background-position: -21px -21px;
            }
            &.sm > i {
              background-position: -21px -42px;
            }
            &.xs > i {
              background-position: -21px -84px;
            }

          }
        }

      }
    }
  }

  // Items Structure
  // -------------------------------------------------------------------------

  ul {
    > li {

      &:first-of-type {

        > a {
          &.submit-add-to-quadmenu-column,
          &.submit-add-to-quadmenu-panel,
          &.submit-add-to-quadmenu-tab {
            z-index: 9999;
            text-align: center;
            width: auto;
            padding: 0;
            text-decoration: none;
            align-items: center;
            cursor: pointer;
            //background: #ebebeb;
            //margin: 0 0 0 15px;

            &:after {
              position: relative;
              display: inline-block;
              font: 16px dashicons;
              color: #c3c3c3;
              content: '\f132';
              width: 46px;
              vertical-align: middle;
              top: 1px;
            }

            &:hover {
            }
          }
        }
      }
    }
  }

  .quadmenu-columns {
    position: relative;
    padding: 46px 0 0 0;
    //overflow: hidden;

    > ul {
      position: absolute;
      width: 100%;
      left: 0;
      right: 0;
      top: 0;
      display: flex;
      background-color: #fafafa;
      border-width: 0 0 1px 0;
      border-style: solid;
      border-color: #e5e5e5;
      margin: 0;
      height: 46px;
      align-items: center;

      > .spinner {
        position: absolute;
        top: 50%;
        right: 0;
        margin: -10px 15px 0 0;
      }

      > li {        
        min-width: 40px;
        padding: 0 15px 0 0;
        margin: 0;

        > a {
          display: flex;
          height: 32px;
          cursor: pointer;

          .transition(all 0.4s);

          &:focus,
            &:hover {
            outline: 0;
            box-shadow: none;
            > .col {
              background: #c3c3c3;
            }
          }
          > .col {
            flex: auto;
            height: 100%;
            margin: 0 3px 0 0;
            background: #ebebeb;
            padding: 0;

            &:last-of-type {
              margin: 0;
            }
          }

        }
      }
    }

    > .spinner {
      right: 0;
    }
  }
  .quadmenu-carousel,
  .quadmenu-panel,
  .quadmenu-tabs,
  .quadmenu-tab,
  .quadmenu-columns,
  .quadmenu-column,
  .quadmenu-column-item {

    //overflow: hidden;

    .quadmenu-title {
      font-size: 12px;
      white-space: nowrap;

      > i {
        margin: 0 5px 0 0;
        color: #333;
      }
    }

    > .inner {
      //box-shadow: none;
      //padding: 0 15px;

      > .action-top {

        .actions {
          position: relative;
          //z-index: 2;
          text-align: right;
          float: right;
          padding: 0 15px;
          z-index: 9999;
          //top: 1px;
          //height: 45px;
          //background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);

          a {
            display: inline-block;
            line-height: 46px;
          }

          .spinner {
            display: none;
            margin: 10px 0;
          }
        }

        .option {
          font: 400 16px/1 dashicons;
          speak: none;
          display: inline-block;            
          position: relative;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          text-decoration: none!important;
          color: #999;

          &:hover {
            color: #333;
            cursor: pointer;
          }

          &:after {
            padding: 0;
            font: 400 14px/40px dashicons;
            display: inline;
          }

          &.remove::after {
            content: '\f182';
            margin: 0;
          }
          &.edit::after {
            content: '\f111';
          }

          &.disabled:hover {
            color: #999;
          }

          &.expand::after {
            content: '\f345';
          }

          &.contract::after {
            content: '\f341';
          }
        } 
      }
    }

    .settings {

      .quadmenu-tabs-content {
        max-height: 400px;
        overflow-y: hidden;
      }

    }

    &.open {

      .option.edit::after {
        content: '\f142';
      }

      .items {
        display: none;
      }

    }

    &.saving {

      > .inner > .action-top {

        > .actions {

          .option {
            visibility: hidden;
          }

          .spinner {
            display: block;
            visibility: visible;
          }
        }

      }
    }

  }

  // Account
  // -------------------------------------------------------------------------

  .quadmenu-tab-pane-account {

    .quadmenu-columns {
      &.row {
        padding-top: 0;
        max-width: 630px;
      }
    }

    .quadmenu-column {
      > .inner {
        padding-top: 15px;

        > .action-top > .actions {
          display: none;
        }
      }
    }
  }

  // Tabs
  // -------------------------------------------------------------------------

  .quadmenu-tabs {
    overflow: visible;
  }

  // Column
  // -------------------------------------------------------------------------

  .drop-column {

    padding: 15px;
    box-sizing: border-box;
    overflow: visible;
    display: table;

    &:before {
      display: table-cell;
      height: 100%;
      content: '';
      box-sizing: border-box;
      width: 100%;
      min-height: 40px;
      position: relative;
      border: 1px dashed #DFDFDF;
    }
  }

  // Open
  // -------------------------------------------------------------------------
  .quadmenu-carousel,
  .quadmenu-panel,
  .quadmenu-tabs,
  .quadmenu-tab,
  .quadmenu-columns,
  .quadmenu-column,
  .quadmenu-column-item { 

    &.open {

      > .inner {
        z-index: 999;
        min-width: 220px;
        width: 100%;
      }

      .settings {
        visibility: visible;
        opacity: 1;
        max-height: 900px;
      }
    }

    .settings {
      position: absolute;
      visibility: hidden;
      max-height: 0;
      opacity: 0;
      right: 0;
      left: 0;
      .transition(all 0.4s cubic-bezier(.18,.74,.72,1));
    }

  }

  .quadmenu-column {
    &.open {
      > .inner {      
        &,
        > .settings {
          box-shadow: 0 3px 12px -4px rgba(0, 0, 0, 0.1);
        }
      }
    }

    &:last-of-type {

      &.open {
        > .inner {
          float: right;
        }
      }

      .quadmenu-column-item {

        &.open {
          > .inner {
            float: right;
          }
        }

      }
    }

  }

  // Column
  // -------------------------------------------------------------------------

  .quadmenu-column {
    padding: 15px;
    box-sizing: border-box;
    overflow: visible;

    &:not(.ui-sortable-helper) {
      .transition(all 0.4s cubic-bezier(.18,.74,.72,1));
    }

    &:focus {
      > .inner {
        z-index: 1010;
      }
    }

    > .inner {
      position: relative;
      padding: 0 15px 15px 15px;
      background: #FAFAFA;

      > .action-top {
        > .actions {
          background: #FAFAFA;           
        }
      }

      > .settings {
        //padding: 0 15px;
        background: #FAFAFA;

        .quadmenu-setting {

          &.quadmenu-setting-width {
            //position: absolute;
            //right: 0;
            //left: auto;
            //z-index: 1;
            min-width: 220px;
            background: #FAFAFA;
            width: 100%;

            > label {
              padding: 0 15px;

              > .quadmenu-setting-width-icons,
              > .quadmenu-setting-width-columns,
              > .quadmenu-setting-width-offset,
              > .quadmenu-setting-width-hidden {

                > div {
                  padding: 0 5px;
                  line-height: 40px;
                  height: 40px;
                }
              }
            }
          }
        }
      }
    }

    .items {
      margin: 0;
      padding: 0;

      &:after {        
        border: 1px dashed #DFDFDF;
        padding: 11px 0 7px 0;
        text-align: center;
        font-weight: 800;
        font: 24px dashicons;
        content: '\f132';
        color: #c3c3c3;
        cursor: pointer;

        &:hover {
          opacity: 0.2;
        }
      }

      &:after,
        .drop-area {
        display: block;
        box-sizing: border-box;
        max-width: 100%;
        min-height: 46px;
        position: relative;
        border: 1px dashed #DFDFDF;
      }

      &.selected {
        border: 1px dashed #DFDFDF;
        padding: 5px 5px 0 5px;

        &:after {
          border: none;
        }
      }

      > li {
        margin: 0 0 5px 0;
        list-style: none;

        .menu-item-bar {
          margin: 0;
        }

        .menu-item-settings,
        .menu-item-bar .menu-item-handle  {
          width: auto;
        }

        .menu-item-handle .item-title {
          margin: 0;
        }

        .menu-item-settings {
          display: block;
          padding:  10px;
        }

        .description-wide {
          width: 100%;
        }

        .menu-item-actions,
        .field-move {
          display: none;
        }

      }
    }

  }

  // Column Item
  // -------------------------------------------------------------------------

  .quadmenu-column-item {

    .item-title {
      padding: 0 15px;
      overflow: hidden;

      .quadmenu-title {
        position: absolute;
        max-width: 60%;
        overflow: hidden;
        vertical-align: middle;
        height: 46px;
        line-height: 46px;
        display: inline-block;
        margin: 0; 
        padding: 0;
        white-space: nowrap;
        border-bottom: 0;
      }
    }

    .settings {            
      left: -1px;
      right: -1px;
      background-color: #fff;
      border: 1px solid #ececec;
    }

    > .inner {    
      position: relative;
      border: 1px solid #ececec;
      box-sizing: border-box;
      background: #fff;
      .transition(all 0.4s cubic-bezier(.18,.74,.72,1));

      > .settings {

        .quadmenu-setting {

          &.quadmenu-setting-icon {
            .button-icon {
              display: none;
            }

            input {
              max-width: 100%;
            }
          }

        }

      }
    }

  }

  // Column Invalid
  // -------------------------------------------------------------------------

  .quadmenu-invalid {

    > .inner {

      &,
      .actions {
        background: #f6c9cc;
        border-color: #f1acb1;
      }

      .action-top {
        .option {
          color: #f5868c;
        }
      }

    }
  }

  // Column Widget
  // -------------------------------------------------------------------------

  .quadmenu-widget {
    .widget {
      margin: 0;
      padding: 15px;
      .widget-inner {           
        border: none;
        box-shadow: none;
        min-height: 100px;

        textarea {
          max-height: 110px;
        }

      }
      &.open .widget-inner {           
        display: block;
      }
    }
  }

}