@import '../index';

.form > .form
  margin: 0

.form > label
  margin-right: 1em

.form .disabled,
.form input,
.form textarea,
.form select,
.form input[type="text"]:disabled
  //border: 1px solid  $app['palette']['border-primary']
  padding: 0.3em
  width: 100%
  height: 2em
  min-height: 2em
  box-sizing: border-box
  font-size: 1em
  font-family: initial
  user-select: none;

.form textarea
  overflow: hidden

.form .disabled
  background-color:  $app['palette']['bg-thirdary']['2']
  color:  $app['palette']['text-thirdary']['2']
  opacity: 0.5

.form input[type="radio"]
  display: none;

.form input[type="radio"] + label
  position: relative;
  cursor: pointer;
  margin: 30px;
  padding-left: 28px;

.form input[type="radio"] .disabled
  background-color:  $app['palette']['bg-thirdary']['2']

.form input[type="radio"] + label:before
  background-color:  $app['palette']['bg-primary']['1']
  box-shadow: inset 0 0 0 18px  $app['palette']['bg-thirdary']['1']
  top: 0
  left: 0
  width: 18px
  height: 18px

.form input[type="radio"] + label:after
  background:  $app['palette']['bg-primary']['1']
  top: 49%
  left: 9px
  width: 54px
  height: 54px
  opacity: 0
  transform: translate(-50%, -50%) scale(0)

.form input[type="radio"] + label:before,
.form input[type="radio"] + label:after
  content: ""
  position: absolute
  border-radius: 50%
  transition: all 0.3s ease

.form input[type="radio"]:checked + label:before
  box-shadow: inset 0 0 0 4px  $app['palette']['border-secondary']

.form input[type="radio"]:checked + label:after
  transform: translate(-50%, -50%) scale(1);
  animation: ripple 1s none;

.form-anchor > div
  display: inline-flex;