/*!
 *  Copyright 2022  SenX S.A.S.
 *
 *  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.
 */
/*!
*  Copyright 2022  SenX S.A.S.
*
*  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.
*/
:host .container {
  display: flex;
  justify-items: stretch;
  flex-direction: row;
}
:host .container .switch {
  position: relative;
  margin-top: auto;
  margin-bottom: auto;
  display: block;
  width: var(--warp-view-switch-width, 2em);
  height: var(--warp-view-switch-height, 1em);
  padding: 3px;
  border-radius: var(--warp-view-switch-radius, 2em);
  cursor: pointer;
}
:host .container .switch-input {
  display: none;
  border-color: var(--warp-view-switch-inset-border-color, #404040);
}
:host .container .switch-label {
  position: relative;
  display: block;
  height: inherit;
  text-transform: uppercase;
  background: var(--warp-view-switch-inset-color, #ffffff);
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
:host .container .switch-input:checked ~ .switch-label {
  background: var(--warp-view-switch-inset-checked-color, #004eff);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
  border-color: var(--warp-view-switch-inset-checked-border-color, #004eff);
}
:host .container .switch-handle {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(var(--warp-view-switch-height, 1em) - 4px);
  height: calc(var(--warp-view-switch-height, 1em) - 4px);
  background: var(--warp-view-switch-handle-color, #c0c0c0);
  border-radius: var(--warp-view-switch-handle-radius, 100%);
  border-color: var(--warp-view-switch-handle-checked-border-color, #ffffff);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
:host .container .switch-input:checked ~ .switch-handle {
  left: calc(var(--warp-view-switch-width, 2em) - var(--warp-view-switch-height, 1em) + 5px);
  background: var(--warp-view-switch-handle-checked-color, #ffffff);
  box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
:host .container .switch-label, :host .container .switch-handle {
  transition: All 0.3s ease;
  -webkit-transition: All 0.3s ease;
  -moz-transition: All 0.3s ease;
  -o-transition: All 0.3s ease;
}
:host .container .text {
  color: var(--warp-view-font-color, #000000);
  padding-left: 5px;
  padding-right: 5px;
  height: auto;
  align-self: center;
  display: inline;
}