/**
 * Copyright © 2016-2017 The Thingsboard Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

$knob-img: url('./knob.png');

$bars-margin-pct: percentage(0.2);
$shadow-size: 5;
$shadow-size-px: $shadow-size+px;
$shadow-offset-px: $shadow-size/2+px;

.tb-shiny-knob {
  width:100%;
  height:100%;
  &.dark {
    background: #000;//$dark-bg-img #1f2129;
  }

  .knob {
    position: relative;
    &[draggable] {
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }
    #canvasBar {
      position:absolute;
      top:0;
      left:0;
      bottom: 0;
      right: 0;
    }
    .top{
      position:absolute;
      top: calc(#{$bars-margin-pct} - #{$shadow-offset-px});
      left: $bars-margin-pct;
      bottom: calc(#{$bars-margin-pct} + #{$shadow-offset-px});
      right: $bars-margin-pct;
      background:$knob-img no-repeat;
      background-size: contain;
      z-index:10;
      cursor:default !important;
      &:after {
        content:'';
        width:10px;
        height:10px;
        background-color:#666;
        position:absolute;
        top:50%;
        left:10px;
        margin-top:-5px;
        border-radius: 50%;
        cursor:default !important;
        box-shadow: 0 0 1px #5a5a5a inset;
      }
    }
    .base{
      top: calc(#{$bars-margin-pct} - #{$shadow-offset-px});
      left: $bars-margin-pct;
      bottom: calc(#{$bars-margin-pct} + #{$shadow-offset-px});
      right: $bars-margin-pct;
      border-radius:50%;
      box-shadow:0 $shadow-size-px 0 #4a5056,$shadow-size-px $shadow-size-px $shadow-size-px #000;
      position:absolute;
      z-index:1;
    }
  }
}
