@import "bootstrap/less/variables.less";
@import "octicon-mixins.less";

#config-view {
  height: 100%;
  width: 100%;
  background: white;
  display: -webkit-flex;

  #config-menu {
    display: -webkit-flex;
    -webkit-flex-direction: column;

    #panels-menu {
      width: 150px;
      margin-left: @line-height-base;
      margin-top: @line-height-base;
      -webkit-flex-grow: 1;

      li a {
        cursor: pointer;
      }
    }

    #open-dot-atom {
      width: 150px;
      margin-left: @line-height-base;
      margin-bottom: @line-height-base;
    }
  }

  #panels {
    -webkit-flex: 1;
    -webkit-flex-flow: column;
    display: -webkit-flex;
    padding: @line-height-base;
    position: relative;
    overflow-y: auto;

    > div {
      -webkit-flex: 1;
    }

    .editor {
      padding-left: 0.25em;
      border: 1px solid #aaa;
      box-shadow: 1px 1px 1px 0 #888 inset;
    }
  }

  #themes-config {
    height: 100%;
    display: -webkit-flex;
    -webkit-flex-flow: column;

    #theme-picker {
      -webkit-flex: 1;
      display: -webkit-flex;
      min-height: 0;

      .panel {
        -webkit-flex: 1;
        display: -webkit-flex;
        -webkit-flex-flow: column;
        min-height: 0;
        &:first-child { margin-right: @line-height-base / 2; }
        &:last-child { margin-left: @line-height-base / 2; }

        .panel-heading {
          margin-bottom: 0;
        }

        ol {
          margin-top: 0;
          -webkit-flex: 1;
          min-height: 0;
          overflow: auto;

          li {
            -webkit-user-select: none;
            cursor: default;
            padding-right: 15px;
            &:first-child { border-top: 0; }
          }
        }

        #enabled-themes {
          li:hover .disable-theme {
            .mini-icon(x);
            color: #888;
            cursor: pointer;
            &:hover { color: #000; }
          }
        }
      }
    }

    li.ui-draggable-dragging, li.ui-sortable-helper {
      border: 0;
      box-sizing: content-box;
      background: white;
      border-radius: 0;
      box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    }

/*    li.ui-draggable-dragging, li.ui-sortable-helper {
      width: 300px;
      background: white;
      border: 1px solid #eee;
      padding: 10px;
    }

    ol {
      box-sizing: border-box;
      height: 400px;
      overflow-y:  auto;
      border: 1px solid #ccc;
      border-top-width: 0;
      background: #fafafa;

      li {
        padding: 10px;
        border-bottom: 1px solid #eee;
        background: white;

        input[type='checkbox'] {
          margin-right: 10px;
        }

        .close-icon {
          display: none;
        }
      }
    }*/

  }

  #packages {
    white-space: nowrap;
    .package-enabled {
      width: 30px;
      text-align: center;
    }
  }

  .btn-retry {
    margin-left: 10px;
  }

  .readme {
    margin-top: 10px;
  }

  .panel-heading .label {
    margin-left: 10px;
  }

  .loading-area {
    span {
      .mini-icon(hourglass);

      &:before {
        font-size: 1.1em;
        width: 1.1em;
        height: 1.1em;
        margin-right: 5px;
      }
    }
  }

  .package-panel {
    .nav {
      margin-bottom: 10px;

      .badge {
        margin-left: 5px;
      }
    }
  }
}