/**
 * Copyright © 2016-2022 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("./svg/knob.svg") !default;

$bars-margin-pct: percentage(.033) !default;
$background-margin-pct: percentage(.05) !default;
$value-container-margin-pct: percentage(.35) !default;
$error-height: percentage(.05) !default;
$title-height: percentage(.066) !default;
$title-container-margin-pct: percentage(.2) !default;
$title-container-margin-bottom-pct: percentage(.05) !default;
$minmax-height: percentage(.04) !default;
$minmax-container-margin-pct: percentage(.18) !default;
$minmax-container-margin-bottom-pct: percentage(.12) !default;

:host {
  .tb-knob {
    width: 100%;
    height: 100%;

    .knob {
      position: relative;

      &[draggable] {
        user-select: none;
      }

      #canvasBar {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
      }

      .canvas-background {
        position: absolute;
        top: $background-margin-pct;
        right: $background-margin-pct;
        bottom: $background-margin-pct;
        left: $background-margin-pct;
        z-index: 2;
        background: #3f4346;
        border-radius: 50%;
      }

      .value-container {
        position: absolute;
        top: $value-container-margin-pct;
        right: $value-container-margin-pct;
        bottom: $value-container-margin-pct;
        left: $value-container-margin-pct;
        z-index: 4;

        .knob-value {
          font-weight: 500;
          color: #fff;
          white-space: nowrap;
        }
      }

      .error-container {
        position: absolute;
        top: 1%;
        right: 0;
        left: 0;
        z-index: 4;
        height: $error-height;

        .knob-error {
          color: #ff3315;
          white-space: nowrap;
        }
      }

      .title-container {
        position: absolute;
        right: $title-container-margin-pct;
        bottom: $title-container-margin-bottom-pct;
        left: $title-container-margin-pct;
        z-index: 4;
        height: $title-height;

        .knob-title {
          font-weight: 500;
          color: #757575;
          white-space: nowrap;
        }
      }

      .minmax-container {
        position: absolute;
        right: $minmax-container-margin-pct;
        bottom: $minmax-container-margin-bottom-pct;
        left: $minmax-container-margin-pct;
        z-index: 4;
        height: $minmax-height;

        .minmax-label {
          font-weight: 500;
          color: #757575;
          white-space: nowrap;
        }
      }

      .top-pointer-container {
        position: absolute;
        top: $bars-margin-pct;
        right: $bars-margin-pct;
        bottom: $bars-margin-pct;
        left: $bars-margin-pct;
        z-index: 3;
        cursor: pointer !important;

        .top-pointer {
          position: absolute;
          top: 50%;
          left: 22%;
          width: 5%;
          height: 5%;
          margin-top: -2.5%;
          cursor: pointer !important;
          content: "";
          background-color: #b5b5b5;
          border-radius: 50%;
          box-shadow: 1px 0 2px #040404;
        }
      }

      .top {
        position: absolute;
        top: $bars-margin-pct;
        right: $bars-margin-pct;
        bottom: $bars-margin-pct;
        left: $bars-margin-pct;
        z-index: 2;
        cursor: pointer !important;
        background: $knob-img no-repeat;
        background-size: contain;
      }

      #text-measure {
        position: absolute;
        width: auto;
        height: auto;
        white-space: nowrap;
        visibility: hidden;
      }
    }
  }
}
