%input {
   padding: 10px 15px;
   width: 100%;
   border: 1px solid var(--tisc-border-primary);
   font-size: 16px;
   border-radius: 2px;
   box-sizing: border-box;
   background: var(--tisc-input);
   color: var(--tisc-text-primary);

   &:focus {
       border: 1px solid var(--tisc-border-secondary);
       outline: 1px solid $blue;
       outline-offset: -3px;
       outline-style: dotted;
   }

   &:disabled {
       background-color: var(--tisc-disabled);
       cursor: default;
   }

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

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

input {
   @extend %input;
}

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;
   }
}

.dark-theme .input__error {
   color: $lightred;
   background: $red;
}

textarea {
   @extend %input;
   height: 200px;
   resize: none;
}

.input__currency {
   padding-left: 50px;
   width: 100%;

   &--contianer {
       position: relative;
   }

   &--symbol {
       position: absolute;
       line-height: 40px;
       width: 40px;
       text-align: center;
       border-right: 1px solid var(--tisc-border-primary);
       color: var(--tisc-text-primary);
   }
}