/**
 * 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.
 */

@import "~compass-sass-mixins/lib/compass";

$error-height: 14px;

$background-color: #e6e7e8;

.tb-round-switch {
  width:100%;
  height:100%;
  background: $background-color;

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

  .error-container {
    position:absolute;
    top: 1%;
    left: 0;
    right: 0;
    z-index:4;
    height: $error-height;
    .switch-error {
      color: #ff3315;
      white-space: nowrap;
    }
  }
  #text-measure {
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;
  }

  #switch-container {
    padding: 10px;
    .switch {
      cursor: pointer;
      position: relative;
      background:#ddd;
      background: -owg-linear-gradient(270deg, #bbb, #ddd);
      background: -webkit-linear-gradient(270deg, #bbb, #ddd);
      background: -moz-linear-gradient(270deg, #bbb, #ddd);
      background: -o-linear-gradient(270deg, #bbb, #ddd);
      -pie-background: -pie-linear-gradient(270deg, #bbb, #ddd);
      background: linear-gradient(180deg, #bbb, #ddd);
      border-radius:130px;
      @include box-sizing(border-box);
      @include box-shadow(
              0px 0px 0px 8px rgba(0,0,0,.1)
              ,0px 0px 3px 1px rgba(0,0,0,.1)
              ,inset 0 8px  3px -8px rgba(255,255,255,.4));
      height: 260px;
      min-height: 260px;
      padding: 25px;
      width: 260px;
      min-width: 260px;

      color: #424242;
      font-family:sans-serif;
      font-size:48px;

      input {
        display:none
      }

      .on,.off {
        position:absolute;
        text-align:center;
        @include text-shadow(1px 1px 4px #4a4a4a);
        width:100%;
      }

      .on {
        color:#444;
        top:10px;
        @include transition(all 0.1s);
        font-family:sans-serif
      }

      .off {
        bottom:5px;
        @include transition(all 0.1s);
        @include transform(scaleY(0.85));
      }

      .but {
        cursor: pointer;
        background-color:#d8d8d8;
        border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px;
        border-bottom-width:0px;
        @include box-shadow(inset 8px 6px 5px -7px #a2a2a2,
                inset -8px 6px 5px -7px #a2a2a2,
                inset 0 -3px 2px -2px rgba(200, 200, 200, 0.5),
                0 3px 3px -2px #ffffff,
                inset 0 -230px 60px -200px rgba(255, 255, 255, 0.2),
                inset 0 220px 40px -200px rgba(0, 0, 0, 0.3));
        display:block;
        font-size:48px;
        height:178px;
        position:relative;
        @include transition(all 0.2s);
        width:200px;
      }

      .back {
        cursor: pointer;
        background-color: #888787;
        background-image: -owg-linear-gradient(0deg, transparent 30%, transparent 70%), -owg-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
        background-image: -webkit-linear-gradient(0deg, transparent 30%, transparent 70%), -webkit-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
        background-image: -moz-linear-gradient(0deg, transparent 30%, transparent 70%), -moz-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
        background-image: -o-linear-gradient(0deg, transparent 30%, transparent 70%), -o-linear-gradient(90deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
        background-image: linear-gradient(-90deg, transparent 30%, transparent 70%), linear-gradient(0deg, rgba(150, 150, 150, 0) 30%, rgba(150, 150, 150, 0.2) 50%, rgba(150, 150, 150, 0) 70%);
        border-radius:105px;
        @include box-shadow(30px 30px 30px -20px rgba(58, 58, 58, 0.3),
                -30px 30px 30px -20px rgba(58, 58, 58, 0.3),
                0 30px 30px 0px rgba(16, 16, 16, 0.3),
                inset 0 -1px 0 0 #484848);
        @include box-sizing(border-box);
        height:210px;
        padding:4px 4px;
        @include transition(all 0.2s);
        width:210px;
      }


      input:checked + .back .on,input:checked + .back .off{
        @include text-shadow(1px 1px 4px #4a4a4a);
      }
      input:checked + .back .on{
        color:#4c4c4c;
        top:10px;
        @include transform(scaleY(0.85));
      }
      input:checked + .back .off{
        color:#444;
        bottom:5px;
        @include transform(scaleY(1));
      }
      input:checked + .back .but{
        background:#dcdcdc;
        background-image: -owg-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
        background-image: -webkit-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
        background-image: -moz-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
        background-image: -o-radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
        background-image: radial-gradient(50% 15%, circle closest-corner, rgba(0, 0, 0, 0.3), transparent);
        border-radius: 400px 400px 400px 400px / 300px 300px 400px 400px;
        @include box-shadow(inset 8px -4px 5px -7px #a9a9a9,
                inset -8px -4px 5px -7px #808080,
                0 -3px 8px -4px rgba(50, 50, 50, 0.4),
                inset 0 3px 4px -2px #9c9c9c,
                inset 0 280px 40px -200px rgba(0, 0, 0, 0.2),
                inset 0 -200px 40px -200px rgba(180, 180, 180, 0.2));
        margin-top:20px;
      }
      input:checked + .back{

        background-image: -owg-linear-gradient(90deg, #868686 30%, transparent 70%), -owg-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
        background-image: -webkit-linear-gradient(90deg, #868686 30%, transparent 70%), -webkit-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
        background-image: -moz-linear-gradient(90deg, #868686 30%, transparent 70%), -moz-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
        background-image: -o-linear-gradient(90deg, #868686 30%, transparent 70%), -o-linear-gradient(180deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);
        background-image: linear-gradient(0deg, #868686 30%, transparent 70%), linear-gradient(90deg, rgba(115, 115, 115, 0) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(105, 105, 105, 0) 100%);

        @include box-shadow(30px 30px 30px -20px rgba(49, 49, 49, 0.1),
                -30px 30px 30px -20px rgba(111, 111, 111, 0.1),
                0 30px 30px 0px rgba(0, 0, 0, 0.2),
                inset 0 1px 2px 0 rgba(167, 167, 167, 0.6));
        padding:2px 4px;
      }

    }
  }
}

