/**
 * 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.
 */
$error-height: 14px !default;

:host {
  .tb-led-indicator {
    width: 100%;
    height: 100%;

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

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

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

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

    #led-container {
      padding: 10px;

      .led {
        position: relative;
        cursor: pointer;
        background-image: radial-gradient(circle closest-corner at 50% 50%, transparent, rgba(0, 0, 0, .25));
        border-radius: 50%;
        transition: background-color .5s, box-shadow .5s;

        &.disabled {
          background-image: radial-gradient(circle closest-corner at 50% 50%, rgba(255, 255, 255, .5), rgba(0, 0, 0, .1));
        }
      }
    }
  }
}
