/* This file is part of the BIMData Platform package.
(c) BIMData support@bimdata.io
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code. */
.base-checkbox{
  position: relative;
  display: inline-block;
  color: rgba($color-black, .87);
  cursor: pointer;
  font-family: "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system;
  line-height: 18px;
  @include font-size(14px);
}

.base-checkbox > input{
  width: 48px;
  height: 48px;
  margin: 0;
  position: absolute;
  left: -15px;
  top: -15px;
  display: block;
  background-color: $color-white;
  border-radius: 100%;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  outline: none;
  z-index: -1;
  @include transform(scale(1));
  @include transition(opacity .5s, transform .5s);
}

.base-checkbox > input:checked{
  background-color: $color-white;
}

.base-checkbox:active > input{
  opacity: 1;
  @include transform(scale(0));
  @include transition(opacity 0s, transform 0s);
}

.base-checkbox > input:disabled{
  opacity: 0;
}

.base-checkbox > input:disabled + span{
  color: rgba($color-black, .38);
  cursor: initial;
}

.base-checkbox > span::before{
  width: 15px;
  height: 15px;
  margin-right: 15px;
  display: inline-block;
  content: "";
  border: solid 1px rgba($color-black, .42);
  vertical-align: -1px;
  @include transition(border-color .5s, background-color .5s);
}

.base-checkbox > input:checked + span::before{
  border-color: $color-white;
  background-color: $color-primary;
}

.base-checkbox > input:active + span::before{
  border-color: #2196f3;
}

.base-checkbox > input:checked:active + span::before{
  border-color: transparent;
  background-color: rgba($color-black, .42);
}

.base-checkbox > input:disabled + span::before{
  border-color: rgba($color-black, .26);
}

.base-checkbox > input:checked:disabled + span::before{
  border-color: transparent;
  background-color: rgba($color-black, .26);
}

.base-checkbox > span::after{
  width: 5px;
  height: 10px;
  display: inline-block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border: solid 2px transparent;
  border-left: none;
  border-top: none;
  @include transform(translate(5.5px, 1px) rotate(45deg));
}

.base-checkbox > input:checked + span::after{
  border-color: $color-white;
}
