@import "../vendor/bootstrap/variables.less";
@import "../vendor/bootstrap/mixins.less";
@import "../core/include/variables.less";
@import "../core/include/mixins.less";

div.ccm-style-customizer-palette {

    &.ccm-style-customizer-palette-large {
        width: 550px;

        div.ccm-style-customizer-slider {
            width: 440px;
        }
    }

    border: 1px solid black;
    width: 250px;
    padding: 10px;
    z-index: @index-level-panel-select-widget;
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #020202;
    .border-radius(4px);
    color: #7f8d90;

    > div {
        position: relative;
        padding-bottom: 12px;
    }

    > div.checkbox {
        padding-bottom: 4px;
    }

    select {
        display: block;
        text-align: center;
        width: 180px;
        background-color: #aaa;
        appearance: none;
        -webkit-appearance: none;
        padding: 10px;
        color: #000;
    }

    div.ccm-style-customizer-slider {
        width: 180px;
    }

    div.ui-slider {
        background-image: none;
        background-color: #444;
        border-color: #444;
        .border-radius(4px);

        a.ui-slider-handle {
            border: none;
            .border-radius(7px);
            background-color: #888 !important;
            outline: none !important;
            background-image: none;
        }
    }

    span.ccm-style-customizer-slider-value {
        position: absolute;
        top: 20px;
        right: 0px;
    }

    div.sp-replacer {
        top: 8px;
        right: 5px;
    }

    input.ccm-flat-checkbox, input.ccm-flat-radio {
        border: 1px solid #444;
    }

    input.ccm-flat-checkbox:checked:after, input.ccm-flat-radio:checked:after {
        color: #3baaf7;
    }

    div.ccm-style-customizer-palette-actions {
        text-align: center;
        padding: 8px 0px 8px 0px;
    }
}


div.ccm-widget-colorpicker {

    &.sp-container {
        .border-radius(4px);
        border: 0px;
        background-color: rgba(0,0,0,0.95);

        .sp-picker-container {
            border-left: 0px;

            .sp-color,
            .sp-alpha,
            .sp-initial,
            .sp-hue {
                border: 2px solid #232323;
                .border-radius(4px);

                .sp-alpha-inner {
                    border: 0px;
                }
            }

            .sp-slider {
                .border-radius(6px);
            }

            .sp-alpha {
                height: 4px;
                background-color: #232323;
                background-image: none;
            }

            .sp-input-container {
                float: none;
                width: 100%;

                .sp-input {
                    outline: 0px;
                    border: 1px solid #666;

                    &:focus {
                        border: 1px solid #666;
                        .box-shadow(none);
                        outline: 0px;
                    }
                }
            }

            .sp-alpha-handle {
                border: none;
                .border-radius(6px);
                width: 12px;
                height: 12px;
                top: -4px;
                background-color: #888 !important;
                outline: none !important;
                background-image: none;

            }

            a.sp-cancel {
                float: left;
                color: #777 !important;
                font-weight: bold;
                font-size: 12px;
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                text-transform: capitalize;

                &:hover {
                    text-decoration: none;
                    color: rgb(235, 54, 54) !important;
                }
            }

            .sp-button-container {
                display: block;
                padding-top: 5px;
                float: none;

                button.sp-choose {
                    float: right;
                    color: #777;
                    font-weight: bold;
                    font-size: 12px;
                    border: none !important;
                    text-shadow: none !important;
                    background-color: transparent !important;
                    background-image: none !important;
                    padding: 0px;
                    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                    text-transform: capitalize;

                    &:hover {
                        text-decoration: none;
                        color: #0c6;
                    }

                    &:focus {
                        outline: none;
                    }

                    &:active {
                        outline: none;
                    }
                }
            }

            .sp-initial {

                span {
                    width: 172px;
                    .border-radius(4px);
                }
                float: none;
                width: 100%;

                div.sp-palette-row-initial {
                    > span:first-child {
                        display: none;
                    }
                }

            }
        }
    }

}

.ccm-ui {
  div.dropdown-menu.ccm-inline-design-dropdown-menu {
    min-width: 261px;

    text-align: left;

    .ccm-file-selector {
      margin-top: 5px;
      margin-bottom: 15px;
    }

    .ccm-inline-style-slider-heading {
      display: block;
      margin-bottom: 5px;
    }

    .ccm-inline-style-slider-display-value {
      display: inline-block;
      margin-left: 5%;
      width: 25%;
      text-align: left;
      vertical-align: text-bottom;

      input[type="text"] {
        width: 100%;
        background: #444;
        color: #ccc;
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;

        &.ccm-slider-value-unit-appended {
          width: 80%;
        }
      }

    }

    .ccm-inline-style-sliders {
      &.ui-slider-horizontal {
        margin-bottom: 15px;
      }
      width: 68%;
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 15px;
    }
    a.ui-slider-handle {
      background-color: #888 !important;
      .border-radius(7px);
      cursor: pointer;
      &:focus {
        outline: none;
        background-color: #666;
      }
    }

    .ui-slider-horizontal {
      margin-top: 5px;
      margin-bottom: 5px;
      background: #444;
      .border-radius(4px);
    }
    padding: 20px;
    background-color: #0f0f0f;
    color: #7f8d90;
    input[type="text"] {
      .border-radius(3px);
      padding: 5px 10px;
      font-size: 13px;
      font-weight: 200;
      margin-top: 5px;
      margin-bottom: 15px;
    }
    select {
      &.form-control {
        background: #aaaaaa;
        color: #4c4c4d;
        padding-right: 30px;
        margin-bottom: 15px;
        margin-top: 5px;
      }
    }
    .ccm-inline-select-container {
      position: relative;
      &:after {
        content: '\f0dd';
        font-family: FontAwesome;
        color: #707070;
        position: absolute;
        bottom: 10px;
        right: 15px;
      }
      #backgroundRepeat {

      }
    }

    .sp-dd {
      display: none;
    }
    .sp-replacer {
      padding: 0;
      margin-left: 10px;
      .sp-preview {
        width: 28px;
        height: 28px;
        border: 0;
        .sp-preview-inner {
          width: 28px;
          height: 28px;
        }
      }
      width: 28px;
      height: 28px;
      .border-radius(4px);
      border: 1px solid #444;
    }

    line-height: @line-height-base;
    h3 {
      font-weight: bold;
      font-size: 13px;
      color: #fff;
      margin: 0px 0px 20px 0px;
    }

    hr {
      border-color: #666;
    }
  }
}