@import "mixins", "presets", "images";

@mixin component-border() {
  @include border-radius($component-border-radius)
}

@mixin component-input-border() {
  border: none;
  box-shadow: $component-inset-border;
  @include component-border();
}

//-----------------------------------------------------------------------------------------//
// ControlKit
//-----------------------------------------------------------------------------------------//

#controlKit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  @include user-select-none();
  pointer-events: none;
//  * {
//    outline: none;
//  }
}

//-----------------------------------------------------------------------------------------//
// Panel
//-----------------------------------------------------------------------------------------//

#controlKit .panel {
  @include box-sizing(border-box);

  pointer-events: auto;
  position: relative;
  z-index: 1;

  @include user-select-none();

  overflow: hidden;
  opacity: 1.0;
  float: left;

  width: $panel-width;
  @include border-radius($panel-border-radius);
  box-shadow: $panel-box-shadow;

  margin: 0;
  padding: 0;

  background-color: $panel-background;
  font-family: $panel-font-family;

  .wrap {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

//-----------------------------------------------------------------------------------------//
// Inputs
//-----------------------------------------------------------------------------------------//

// Shared
//-----------------------------------------------------------------------------------------//

#controlKit {
  .panel input[type='text'],
  .panel textarea,
  .panel .color,
  .picker input[type='text'] {
    @include box-sizing(border-box);

    width: 100%;
    height: $input-height;
    padding: $input-padding;

    font-family: $input-font-family;
    font-size: $input-font-size;
    color: $input-color;
    text-shadow: $input-text-shadow;

    outline: none;

    @include linear-gradient-with-background(#{$input-gradient}, $input-background);
    @include component-input-border();
  }
  .panel .button,
  .picker .button,
  .panel .select,
  .panel .select-active {
    @include box-sizing(border-box);

    cursor: pointer;

    width: 100%;
    height: $button-height;
    margin: $button-margin;

    @include linear-gradient($button-gradient);

    border: none;
    outline: 0;
    border-radius: $button-border-radius;
    box-shadow: $button-box-shadow;

    font-family: $button-font-family;
    color: $button-color;
  }
  .panel textarea{
    padding: $textarea-padding;
    overflow: hidden;
    resize: none;
    vertical-align: top;
    white-space: nowrap;
  }
  .panel .textarea-wrap {
    @include box-sizing(border-box);

    width: 100%;
    padding: 0;
    float: left;
    height: 100%;

    overflow: hidden;

    border-radius: $textarea-wrap-border-radius;
    @include component-input-border();

    background-color: $textarea-wrap-background;
    box-shadow: $textarea-wrap-box-shadow;
    @include linear-gradient($textarea-wrap-gradient);

    textarea{
      border: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      @include border-radius($textarea-wrap-border-radius);
      box-shadow: none;
      background: none;
    }
    .scrollBar{
      border: $textarea-wrap-scrollBar-border;
      border-bottom-right-radius: $textarea-wrap-border-radius;
      border-top-right-radius: $textarea-wrap-border-radius;
      border-left: none;
      box-shadow : $textarea-wrap-box-shadow;
    }
  }
  .panel{
    canvas {
      cursor: pointer;
      vertical-align: bottom;
      @include component-input-border;
    }
    .svg-wrap, .canvas-wrap {
      margin: $canvas-wrap-margin;

      position: relative;

      width: 70%;
      float: right;

      @include box-sizing(border-box);

      border: none;
      @include border-radius($canvas-wrap-border-radius);

      background: $canvas-wrap-background;
      @include linear-gradient($canvas-wrap-gradient);

      svg {
        position: absolute;

        left: 0;
        top: 0;
        cursor: pointer;
        vertical-align: bottom;
        @include component-input-border;
      }
    }
  }
}

// Buttons
//-----------------------------------------------------------------------------------------//

#controlKit{
  .panel .button, .picker .button {
    font-size: $button-font-size;
    font-weight: $button-font-weight;
    text-shadow: $button-text-shadow;
    text-transform: $button-text-transform;
    &:hover {
      @include linear-gradient($button-hover-gradient);
    }
    &:active {
      @include linear-gradient($button-active-gradient);
    }
  }
}

// Presets
//-----------------------------------------------------------------------------------------//

#controlKit .panel {
  .input-with-preset-wrap, .color-with-preset-wrap {
    width: 100%;
    float: left;
  }
  .input-with-preset-wrap input[type='text'], .color-with-preset-wrap .color {
    padding-right: 25px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    float: left;
  }

  .button-preset, .button-preset-active {
    @include box-sizing(border-box);
    position: absolute;
    right: 0;
    width: $button-preset-width;
    height: $button-preset-height;
    margin: 0;
    cursor: pointer;
    float: right;
    border: none;
    border-top-right-radius: $button-border-radius;
    border-bottom-right-radius: $button-border-radius;
    box-shadow: $button-box-shadow;
    outline: 0;
  }
  .button-preset-active, .button-preset:hover{
    @include linear-gradient-with-image(#{$button-preset-hover-gradient},  $imageBtnPreset 50% 50% no-repeat);
  }
  .button-preset {
    @include linear-gradient-with-image(#{$button-preset-gradient}, $imageBtnPreset 50% 50% no-repeat);
  }
}

// Checkboxes
//-----------------------------------------------------------------------------------------//

#controlKit .panel{
  input[type='checkbox']{
    margin: 6px 0 0 0;
  }
}

// Selects
//-----------------------------------------------------------------------------------------//

#controlKit .panel{
  .select, .select-active {
    padding-left: 10px;
    padding-right: 20px;

    font-size: $component-font-size;
    text-align: left;
    text-shadow: $input-text-shadow;

    cursor: pointer;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .select {
    @include linear-gradient-with-image(#{$select-gradient}, $imageSelect 100% 50% no-repeat);
  }
  .select:hover, .select-active {
    @include linear-gradient-with-image(#{$select-hover-gradient}, $imageSelect 100% 50% no-repeat);
  }
}

// Sliders
//-----------------------------------------------------------------------------------------//

#controlKit .panel{
  .wrap-slider,.slider-wrap,.slider-slot,.slider-handle {
    @include box-sizing(border-box);
  }
  .wrap-slider {
    width: 70%;
    padding: 6px 0 0 0;
    float: right;
    height: 100%;

    input[type='text'] {
      width: 25%;
      text-align: center;
      padding: 0;
      float: right;
    }
  }
  .slider-wrap {
    float: left;
    cursor: ew-resize;
    width: $slider-width;
  }
  .slider-slot {
    width: 100%;
    height: $slider-height;
    padding: $slider-padding;
    background-color: $slider-slot-background;
    @include component-input-border();
  }
  .slider-handle {
    position: relative;
    width: 100%;
    height: 100%;
    @include linear-gradient-with-background(#{$slider-handle-gradient},$slider-handle-background);
    box-shadow: $slider-handle-box-shadow;
  }
}

// Colors
//-----------------------------------------------------------------------------------------//

#controlKit .panel {
  .color {
    @include box-sizing(border-box);
    @include user-select-none();
    cursor: pointer;

    width: 100%;
    height: $input-height;
    padding: 0;

    border: none;
    background:  #fff;
    box-shadow: 0 0 0 1px #111314 inset;

    text-align:  center;
    line-height: $input-height;

    @include component-border;
  }
}

// Plotters
//-----------------------------------------------------------------------------------------//

#controlKit .panel{
  .graph-slider-x-wrap, .graph-slider-y-wrap {
    position: absolute;
    @include box-sizing(border-box);
  }
  .graph-slider-x-wrap {
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 20px 6px 6px;
  }
  .graph-slider-y-wrap {
    top: 0;
    right: 0;
    height: 100%;
    padding: 6px 6px 20px 6px;
  }
  .graph-slider-x, .graph-slider-y {
    @include box-sizing(border-box);
    @include border-radius(2px);
    background: rgba(24, 27, 29, 0.5);
    border: 1px solid rgb(24, 27, 29);
  }
  .graph-slider-x {
    height: 8px;
  }
  .graph-slider-y {
    width: 8px;
    height: 100%;
  }
  .graph-slider-x-handle, .graph-slider-y-handle {
    @include box-sizing(border-box);
    cursor: pointer;
    border: 1px solid rgb(24, 27, 29);
    background: #303639;
  }
  .graph-slider-x-handle {
    width: 20px;
    height: 100%;
    border-top: none;
    border-bottom: none;
  }
  .graph-slider-y-handle {
    width: 100%;
    height: 20px;
    border-left: none;
    border-right: none;
  }
}

// Range
//-----------------------------------------------------------------------------------------//
#controlKit .sub-group .wrap .wrap .wrap{
  width: 25% !important;
  padding: 0 !important;
  float: left !important;
  .label{
    width: 100% !important;
    padding: $range-label-padding !important;

    color: $range-label-color !important;
    text-align: $range-label-text-align  !important;
    text-transform: $range-label-text-transform  !important;
    font-weight: $range-label-font-weight !important;
    text-shadow: $range-label-text-shadow !important;
  }
  input[type='text'] {
    padding: 0;
    text-align: center;
  }
}


// Options
//-----------------------------------------------------------------------------------------//
#controlKit{
  .options{
    pointer-events: auto;

    @include box-sizing(border-box);
    @include border($options-border, $options-border-radius);

    position: absolute;
    z-index: 2147483638;

    left: 0;
    top: 0;
    width: auto;
    height: auto;

    box-shadow : $options-box-shadow;
    background-color: $options-background;

    font-family: $options-font-family;
    font-size: $options-font-size;
    color: $options-color;
    text-shadow: $options-text-shadow;
    overflow: hidden;

    ul {
      width: 100%;
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        margin: 0;
        width: 100%;
        height: $optionsList-item-height;
        line-height: $optionsList-item-height;
        padding: $optionsList-item-padding;

        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;

        cursor: pointer;

        &:hover {
          background-color: $optionsList-item-hover-background;
        }
      }
      .li-selected {
        background-color: $optionsList-item-selected-background;
      }
    }
    .color {
      @include box-sizing(border-box);
      li, .li-selected {
        @include box-sizing(border-box);
        padding: 0;
        height: $input-height;
        line-height: $input-height;
        text-align: center;
        &:hover {
          background: none;
          font-weight: bold;
        }
      }
      .li-selected {
        font-weight: bold;
      }
    }
  }
}

//-----------------------------------------------------------------------------------------//
// Heads & labels
//-----------------------------------------------------------------------------------------//

//labels & heads shared
#controlKit {
  .panel .label, .picker .label {
    width: 100%;

    float: left;
    font-size: $label-font-size;
    font-weight: $label-font-weight;
    text-shadow: $label-text-shadow;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: default;
  }
  .panel .head, .picker .head, .panel .panel-head-inactive {
    height: $panel-head-height;
    padding: $panel-head-padding;
    background: $panel-head-background;
    overflow: hidden;

    //TODO: merge with panel
    .wrap {
      width: auto;
      height: auto;
      margin: 0;
      padding: 0;
      position: relative;
      overflow: hidden;
    }
  }
  .panel .head, .picker .head {
    .label {
      cursor: pointer;
      line-height: $panel-head-height;
      color: $panel-head-label-color
    }
  }
}

//-----------------------------------------------------------------------------------------//
// Group
//-----------------------------------------------------------------------------------------//

#controlKit .panel .group-list .group {
  .head {
    height: $group-head-height;
    padding: $group-head-padding;
    border-top: $group-head-border-top;
    border-bottom: $group-head-border-bottom;

    @include linear-gradient($group-head-gradient);
    cursor: pointer;

    .label {
      font-size: $group-head-label-font-size;
      line-height: $group-head-height;
      color: $group-head-label-color;
    }
    &:hover {
      border-top: $group-head-hover-border-top;
      @include linear-gradient($group-head-hover-gradient);
    }
  }
  li {
    height: $subGroupList-item-height;
    padding: $subGroupList-item-padding;
  }
}

//-----------------------------------------------------------------------------------------//
// SubGroup
//-----------------------------------------------------------------------------------------//

#controlKit .panel .group-list .group {
  .sub-group-list {
    .sub-group:last-of-type{
      border-bottom: none;
    }
    .sub-group {
      padding: 0;
      height: auto;
      border-bottom: $subGroup-border;

      ul {
        overflow: hidden;
        li {
          background: $subGroupList-item-background;
          border-bottom: $subGroupList-item-border-bottom;
        }
        li:last-of-type {
          border-bottom: none;
        }
      }
      &:first-child {
        margin-top: 0;
      }
      .head, .head-inactive {
        cursor: pointer;
      }
      .head {
        height: $subGroup-head-height;
        padding: $subGroup-head-padding;
        border-top: none;
        border-bottom: $subGroup-border;
        background-image: none;
        background-color: $subGroup-head-background;
        &:hover {
          background-image: none;
          background-color: $subGroup-head-hover-background;
        }
      }
      .head-inactive {
        @include box-sizing(border-box);
        height: $subGroup-head-height;
        padding: $subGroup-head-padding;

        box-shadow: $subGroup-head-inactive-box-shadow;
        @include linear-gradient($subGroup-head-inactive-gradient);

        &:hover {
          box-shadow: $subGroup-head-inactive-hover-box-shadow;
          background-image: none;
          @include linear-gradient($subGroup-head-inactive-hover-gradient);
        }
      }
      .head .label, .head-inactive .label {
        margin: 0;
        padding: 0;
        line-height: $subGroup-head-height;

        color: $subGroup-head-label-color;
        font-weight: $subGroup-head-label-font-weight;
        font-size: $subGroup-head-label-font-size;
        text-shadow: $subGroup-head-label-text-shadow;
        text-transform: $subGroup-head-label-text-transform;
      }
      .head, .head-inactive {
        .wrap .label {
          width: 100%;
          font-weight: $subGroup-head-label-font-weight;
          color: $subGroup-head-label-color;
          padding: 0;
        }
      }
      .wrap {
        .label{
          @include box-sizing(border-box);
          height: 100%;
          width: $component-label-width;
          padding: $component-label-padding;
          float: left;

          font-size: $component-label-font-size;
          font-weight: $component-label-font-weight;
          color: $component-label-color;
          text-shadow: $component-label-text-shadow;
        }
        .wrap{
          @include box-sizing(border-box);
          width: $component-width;
          padding: $component-padding;
          float: right;
          height: 100%;
        }
      }
    }
  }
  &:last-child {
    .sub-group-list, .scroll-buffer:nth-of-type(3) {
      border-bottom: none;
    }
    .scroll-wrap .sub-group-list {
      //border-bottom: map-1($subG);

    }
  }
}

//-----------------------------------------------------------------------------------------//
// Scroll
//-----------------------------------------------------------------------------------------//

#controlKit .panel{
  .scroll-wrap {
    position: relative;
    overflow: hidden;
  }
  .scroll-buffer {
    width: 100%;
    height: $scrollBuffer-height;
    border-top: $scrollBuffer-border-top;
    border-bottom: $scrollBuffer-border-bottom;
  }
  .scrollBar{
    @include box-sizing(content-box);
    width: $scrollBar-width;
    height: 100%;
    float: right;
    top: 0;
    padding: 0;
    margin: 0;
    position: relative;
    @include horizontal-linear-gradient-with-background(#{$scrollBar-gradient},$scrollBar-background);
    .track{
      padding: $scrollBar-track-padding;
      .thumb{
        @include box-sizing(border-box);
        width: $scrollBar-thumb-width;
        position: absolute;
        cursor: pointer;
        background-color: $scrollBar-thumb-background;
        @include border($scrollBar-thumb-border,$scrollBar-thumb-border-radius);
        box-shadow: $scrollBar-thumb-box-shadow;
      }
    }
  }
}


//-----------------------------------------------------------------------------------------//
// Menu
//-----------------------------------------------------------------------------------------//

#controlKit .panel .menu,
#controlKit .panel .menu-active,
#controlKit .picker .menu {
  float: right;
  padding: $menu-padding;

  input[type='button'] {
    @include box-sizing(border-box);

    cursor: pointer;

    height: $menu-button-height;
    border: none;

    vertical-align: top;

    @include border-radius($menu-button-border-radius);

    font-family: $menu-button-font-family;
    font-size: $menu-button-font-size;
    font-weight: $menu-button-font-weight;
    color: $menu-button-color;
    text-shadow: $menu-button-text-shadow;
    text-transform: $menu-button-text-transform;

    box-shadow: $menu-button-box-shadow;

    outline: none;
  }


  @mixin menu-button-background($img, $imgHover) {
    background: $img 50% 50% no-repeat, $menu-button-background;
    &:hover {
      background: $imgHover 50% 50% no-repeat, $menu-button-hover-background;
      box-shadow: $menu-button-hover-gradient;
    }
  }

  .button-menu-hide, .button-menu-show, .button-menu-close {
    width: 20px;
    margin-left: $menu-button-margin-left;
  }
  .button-menu-hide {
    @include menu-button-background($imageBtnHide, $imageBtnHideHover);
  }
  .button-menu-show {
    @include menu-button-background($imageBtnShow, $imageBtnShowHover);
  }
  .button-menu-close {
    @include menu-button-background($imageBtnClose, $imageBtnCloseHover);
  }


}

#controlKit .panel .menu,
#controlKit .panel .menu-active{
  .button-menu-undo {
    background: $imageBtnUndo 20% 50% no-repeat, $menu-button-background;
    padding: $menu-buttonUndo-padding;
    width: $menu-buttonUndo-width;

    vertical-align: top;
    text-align: end;

    &:hover {
      background: $imageBtnUndoHover 20% 50% no-repeat, $menu-button-hover-background;
      box-shadow: $menu-button-hover-gradient;
    }
  }
  .button-menu-load{
    margin-right: 2px;
  }
  .button-menu-load,.button-menu-save{
    background: $menu-button-background;
    font-size: 9px !important;
    &:hover{
      background:$menu-button-hover-background;
    }
  }
}


#controlKit .panel {
  .menu{
    .wrap{
      display: none;
    }
  }
  .menu-active{
    width: 100%;
    float: left;
    .wrap{
      display: inline;
    }
    .button-menu-hide, .button-menu-show, .button-menu-close{
      float: right;
    }
    
  }
}


//-----------------------------------------------------------------------------------------//
// Arrows
//-----------------------------------------------------------------------------------------//

#controlKit .panel{
  .arrow-s-max {
    background: $image-arrow-s-max center no-repeat;
  }
  .arrow-s-min {
    background: $image-arrow-s-min center no-repeat;
  }
  .arrow-s-max, .arrow-s-min {
    width: 100%;
    height: 20px;
  }
  .arrow-b-max {
    background: $image-arrow-b-max center no-repeat;
  }
  .arrow-b-min {
    background: $image-arrow-b-min center no-repeat;
  }
  .arrow-b-sub-max {
    background: $image-arrow-b-sub-max center no-repeat;
  }
  .arrow-b-sub-min {
    background: $image-arrow-b-sub-min center no-repeat;
  }
  .arrow-b-max, .arrow-b-min, .arrow-b-sub-max, .arrow-b-sub-min {
    width: 10px;
    height: 100%;
    float: right;
  }
}

//-----------------------------------------------------------------------------------------//
// Color Picker
//-----------------------------------------------------------------------------------------//

#controlKit .picker{
  pointer-events: auto;

  @include box-sizing(border-box);
  @include border-radius($picker-panel-border-radius);
  background-color: #3b3b3b;

  font-family: $picker-panel-font-family;
  font-size: $picker-panel-font-size;
  color: $picker-panel-color;
  text-shadow: $picker-panel-text-shadow;
  overflow: hidden;

  position: absolute;
  z-index: 2147483631;

  width: $picker-panel-width;

  @include user-select-none();
  box-shadow: $panel-box-shadow;

  canvas {
    vertical-align: bottom;
    cursor: pointer;
  }

  .wrap{
    @include box-sizing(border-box);
    padding: $picker-panel-padding;
    float: left;
  }
  .field-wrap {
    padding: $picker-field-wrap-padding;
  }
  .slider-wrap {
    padding: $picker-slider-wrap-padding;
  }
  .field-wrap, .slider-wrap, .input-wrap {
    height: auto;
    overflow: hidden;
    float: left;
  }
  //FIXME
  .input-wrap {
    @include box-sizing(border-box);
    @include border($picker-input-wrap-border, $picker-input-wrap-border-radius);
    width: $picker-input-wrap-width;
    float: right;
    padding: $picker-input-wrap-padding;
  }
  .input-field {
    width: $picker-input-field-width;
    float: right;
    margin-bottom: $picker-input-field-margin-bottom;
    .label{
      padding: $range-label-padding;
      color: $range-label-color;
      text-align: center;
      text-transform: $range-label-text-transform;
      font-weight: $range-label-font-weight;
      text-shadow: $range-label-text-shadow;
      width: $picker-input-field-ratio-label;
    }
    .wrap{
      padding: 0;
      width: $picker-input-field-ratio-wrap;
      height: auto;
      float: right;
    }
  }
  .controls-wrap {
    @include box-sizing(border-box);
    width: 100%;
    height: auto;
    float: right;
    padding: $picker-controls-wrap-padding;

    input[type='button'] {
      float: right;
      width: $picker-control-button-width;
      margin: $picker-control-button-margin;
    }
  }
  .color-contrast {
    @include box-sizing(border-box);
    @include component-input-border;

    height: $picker-color-contrast-height;
    padding: $picker-color-contrast-padding;
    width: $picker-color-contrast-width;
    margin-bottom: $picker-color-contrast-margin-bottom;
    float: right;

    div {
      width: 50%;
      height: 100%;
      float: left;
    }
  }
  input[type='text'] {
    padding: 0;
    text-align: center;
    width: 60%;
    float: right;
  }
  .wrap {
    .input-wrap:nth-of-type(3) {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    .input-wrap:nth-of-type(4) {
      border-top: none;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      .input-field {
        width: 100%;
        .label {
          width: 20%;
        }
      }
      input[type='text'] {
        width: 80%;
      }
    }
  }
  .field-wrap, .slider-wrap {
    background: #1e2224;
    @include component-input-border;
    position: relative;
    margin-right: 5px;

    .indicator {
      position: absolute;
      border: $picker-indicator-border;
      box-shadow: $picker-indicator-box-shadow;
      cursor: pointer;
    }
  }
  .field-wrap .indicator {
    width: $picker-indicator-field-size;
    height: $picker-indicator-field-size;

    left: 50%;
    top: 50%;

    @include border-radius(50%);
  }
  .slider-wrap .indicator{
    width: $picker-indicator-slider-width;
    height: $picker-indicator-slider-height;
    @include border-radius($picker-indicator-field-size);
    left: 1px;
    top: 1px;
    &:after {
      content: '';
      @include arrow(
              $picker-indicator-slider-arrow-width,
              $picker-indicator-slider-arrow-height,
              $picker-indicator-color,
              'left');
      float: right;

      position: absolute;
      top: $picker-indicator-slider-arrow-top;
      left: $picker-indicator-slider-arrow-left;
    }
    &:before{
      content: '';
      @include arrow(
        $picker-indicator-slider-arrow-width,
        $picker-indicator-slider-arrow-height,
        #000,
        'left'
      );
      float: right;
      position: absolute;
      top: $picker-indicator-slider-arrow-top - 1;
      left: $picker-indicator-slider-arrow-left;
    }
  }
}

//-----------------------------------------------------------------------------------------//
// Save / Load
//-----------------------------------------------------------------------------------------//