/**
 * Copyright © 2016-2020 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.
 */
@import "node_modules/compass-sass-mixins/lib/compass";

$error-height: 14px !default;

:host {
  .tb-round-switch {
    width: 100%;
    height: 100%;

    .title-container {
      .switch-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;

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

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

    #switch-container {
      padding: 10px;

      .switch {
        position: relative;

        box-sizing: border-box;
        width: 260px;
        min-width: 260px;
        height: 260px;
        min-height: 260px;
        padding: 25px;
        font-family: sans-serif;
        font-size: 48px;

        color: #424242;
        cursor: pointer;
        background: #ddd;
        background: linear-gradient(180deg, #bbb, #ddd);
        border-radius: 130px;

        box-shadow: 0 0 0 8px rgba(0, 0, 0, .1),
        0 0 3px 1px rgba(0, 0, 0, .1),
        inset 0 8px 3px -8px rgba(255, 255, 255, .4);

        input {
          display: none;
        }

        .on,
        .off {
          position: absolute;
          width: 100%;
          text-align: center;

          text-shadow: 1px 1px 4px #4a4a4a;
        }

        .on {
          top: 10px;
          font-family: sans-serif;
          color: #444;

          transition: all .1s;
        }

        .off {
          bottom: 5px;

          transition: all .1s;

          transform: scaleY(.85);
        }

        .but {
          position: relative;
          display: block;
          width: 200px;
          height: 178px;
          font-size: 48px;
          cursor: pointer;
          background-color: #d8d8d8;
          border-bottom-width: 0;
          border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px;

          box-shadow: inset 8px 6px 5px -7px #a2a2a2,
          inset -8px 6px 5px -7px #a2a2a2,
          inset 0 -3px 2px -2px rgba(200, 200, 200, .5),
          0 3px 3px -2px #fff,
          inset 0 -230px 60px -200px rgba(255, 255, 255, .2),
          inset 0 220px 40px -200px rgba(0, 0, 0, .3);

          transition: all .2s;
        }

        .back {

          box-sizing: border-box;
          width: 210px;
          height: 210px;
          padding: 4px 4px;
          cursor: pointer;
          background-color: #888787;
          background-image: linear-gradient(-90deg, transparent 30%, transparent 70%), linear-gradient(0deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, .2) 50%, rgba(150, 150, 150, 0) 70%);
          border-radius: 105px;

          box-shadow: 30px 30px 30px -20px rgba(58, 58, 58, .3),
          -30px 30px 30px -20px rgba(58, 58, 58, .3),
          0 30px 30px 0 rgba(16, 16, 16, .3),
          inset 0 -1px 0 0 #484848;

          transition: all .2s;
        }


        input:checked + .back .on,
        input:checked + .back .off {
          text-shadow: 1px 1px 4px #4a4a4a;
        }

        input:checked + .back .on {
          top: 10px;
          color: #4c4c4c;

          transform: scaleY(.85);
        }

        input:checked + .back .off {
          bottom: 5px;
          color: #444;

          transform: scaleY(1);
        }

        input:checked + .back .but {
          margin-top: 20px;
          background: #dcdcdc radial-gradient(circle closest-corner at 50% 15%, rgba(0, 0, 0, .3), transparent);
          border-radius: 400px 400px 400px 400px / 300px 300px 400px 400px;

          box-shadow: inset 8px -4px 5px -7px #a9a9a9,
          inset -8px -4px 5px -7px #808080,
          0 -3px 8px -4px rgba(50, 50, 50, .4),
          inset 0 3px 4px -2px #9c9c9c,
          inset 0 280px 40px -200px rgba(0, 0, 0, .2),
          inset 0 -200px 40px -200px rgba(180, 180, 180, .2);
        }

        input:checked + .back {
          padding: 2px 4px;

          background-image: linear-gradient(0deg, #868686 30%, transparent 70%), linear-gradient(90deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, .74) 50%, rgba(105, 105, 105, 0) 100%);

          box-shadow: 30px 30px 30px -20px rgba(49, 49, 49, .1),
          -30px 30px 30px -20px rgba(111, 111, 111, .1),
          0 30px 30px 0 rgba(0, 0, 0, .2),
          inset 0 1px 2px 0 rgba(167, 167, 167, .6);
        }
      }
    }
  }
}