%input {
   padding: 10px 15px;
   width: calc(100% - 32px);
   border: 1px solid var(--tisc-border-primary);
   font-size: 16px;
   border-radius: 2px;

   &:focus {
       border: 1px solid color('grey', 8);
       outline: 1px solid var(--tisc-primary);
       outline-offset: -3px;
       outline-style: dotted;
   }

   &:disabled {
       background-color: color('grey', 2);
       cursor: default;
   }

   &::placeholder {
       color: color('grey', 4);
       font-style: italic;
   }
}

%label {
   display: block;
   margin-bottom: 5px;
   color: var(--tisc-text-primary)
}

%input__option--container {
   border: 1px solid var(--tisc-border-primary);
   border-radius: 2px;
   padding: 10px 15px;
   margin-bottom: 10px;
   background: var(--tisc-bg-secondary);
}

%input__option {
   position: absolute;
   opacity: 0;
   pointer-events: none;
   width: auto;
}

%input__option--input {
   position: relative;
   padding-left: 35px;
   cursor: pointer;
   display: inline-block;
   line-height: 25px;
   user-select: none;

   &:before {
       content: '';
       left: 0;
       position: absolute;
       height: 20px;
       width: 20px;
       border: 2px solid var(--tisc-border-primary);
       transition: all .2s;
   }

   &:after {
       content: "";
       position: absolute;
       display: none;
   }
}

label,
.input__label {
   @extend %label;
}

.input__hint {
   @extend %label;
   font-style: italic;
   font-size: .8em;
}

.input__error {
   @extend %label;
   color: $red;
   background: $lightred;
   padding: 10px 5px;

   +input {
       border-color: $red;
   }
}

.input__checkbox {
   @extend %input__option;

   &:checked {
       +.input__checkbox--text {
           &:after {
               display: block;
           }

           &:before {
               border: 2px solid var(--tisc-primary);
               background-color: var(--tisc-primary);
           }
       }
   }

   &:disabled {
       +.input__checkbox--text {
           cursor: initial;

           &:before {
               background-color: rgb(235, 235, 228);
               border: 2px solid rgb(235, 235, 228);
           }
       }
   }

   &--container {
       @extend %input__option--container;
   }

   &--container-inline {
       @extend %input__option--container;
       display: inline-block;

       .input__checkbox--text {
           padding: 30px 0 0 0;

           &:before,
           &:after {
               left: 50%;
           }

           &:after {
               transform: translateX(-50%) rotate(45deg);
           }

           &:before {
               top: 0;
               transform: translateX(-50%);
           }
       }
   }

   //custom checkbox
   &--text {
       @extend %input__option--input;

       &:hover {
           &:before {
               background-color: var(--tisc-border-primary);
           }
       }

       &:after {
           left: 8px;
           top: 3px;
           width: 5px;
           height: 12px;
           border: solid var(--tisc-bg-secondary);
           border-width: 0 3px 3px 0;
           transform: rotate(45deg);
       }

       &:before {
           border-radius: 2px;
       }
   }
}

.input__radio {
   @extend %input__option;

   &:checked {
       +.input__radio--text {
           &:after {
               display: block;
           }

           &:before {
               border: 2px solid var(--tisc-primary);
           }

           &:hover {
               &:after {
                   background-color: var(--tisc-primary);
               }
           }
       }

       &:disabled {
           +.input__radio--text:after {
               background-color: $white;
           }

           +.input__radio--text:hover {
               &:after {
                   background-color: $white;
               }
           }
       }
   }

   &:disabled {
       +.input__radio--text {
           cursor: initial;

           &:before {
               background-color: rgb(235, 235, 228);
               border: 2px solid rgb(235, 235, 228);
           }

           &:hover {
               &:after {
                   background-color: rgb(235, 235, 228);
               }
           }
       }
   }

   &--container {
       @extend %input__option--container;
   }

   &--container-inline {
       @extend %input__option--container;
       display: inline-block;

       .input__radio--text {
           padding: 30px 0 0 0;

           &:before,
           &:after {
               left: 50%;
               transform: translateX(-50%);
           }

           &:before {
               top: 0;
           }
       }
   }

   //custom radio button
   &--text {
       @extend %input__option--input;

       &:hover {
           &:after {
               background-color: var(--tisc-border-primary);
               display: block;
           }
       }

       &:before {
           border-radius: 50%;
       }

       &:after {
           left: 5px;
           top: 5px;
           width: 14px;
           height: 14px;
           border-radius: 50%;
           background-color: var(--tisc-primary);
       }
   }
}

.input__toggle {
   @extend %input__option;

   &:checked+.input__toggle--switch {
       background-color: var(--tisc-primary-light);

       &:before {
           transform: translateY(-5px) translateX(35px);
           background-color: var(--tisc-primary);
           box-shadow: 0 0 6px 0px ;
       }
   }

   &:disabled+.input__toggle--switch {
       background-color: rgb(235, 235, 228);

       &:before {
           background-color: darken(#F1F1F1, 20%);
           box-shadow: none;
       }
   }

   &:focus+.input__toggle--switch {
       box-shadow: 0 0 1px var(--tisc-primary-dark);
   }

   &--container {
       @extend %input__option--container;
       position: relative;
   }

   &--container-inline {
       @extend %input__option--container;
       position: relative;
       display: inline-block;

       .input__toggle--text {
           padding: 30px 0 0 0;
           margin: 0px 20px;

           &:before,
           &:after {
               left: 50%;
               transform: translateX(-50%);
           }

           &:before {
               top: 0;
           }
       }

       .input__toggle--switch {
           top: 15px;
           left: 50%;
           transform: translateX(-50%);
       }
   }

   &--switch {
       position: absolute;
       cursor: pointer;
       height: 15px;
       width: 60px;
       top: 50%;
       left: 10px;
       background-color: $grey;
       transition: .4s;
       border-radius: 34px;
       transform: translateY(-50%);

       &:before {
           position: absolute;
           content: "";
           height: 25px;
           width: 25px;
           transform: translateY(-5px);
           background-color: color('grey', 1);
           transition: .4s;
           border-radius: 50%;
           box-shadow: 0 0 6px 0px var(--tisc-box-shadow);
       }
   }

   &--text {
       margin: 10px 0 10px 60px;
   }
}

.input__select {
   @extend %input;
   -webkit-appearance: none;
   -ms-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-color: var(--tisc-input);//transparent;
   color: var(--tisc-text-primary);
   cursor: pointer;
   width: 100%;

   &::-ms-expand {
       display: none;
   }

   &--container {

       background-color: var(--tisc-input);
       position: relative;

       &:before {
           font-family: 'Font Awesome 5 Free';
           content: "\f078";
           font-weight: 900;
           position: absolute;
           top: 13px;
           right: 10px;
       }
   }
}