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

.input__file {
   position: absolute;
   opacity: 0;
   pointer-events: none;
   width: fit-content;

   &:disabled~.input__file--text {
       color: lighten($grey, 15%);
       border-color: lighten($grey, 15%);
   }

   &--container {
       display: flex;
       align-items: center;
   }

  &--button, &--button-img {
     margin: 0;
     padding: 5px 30px;
     transition: all .2s;
     min-height: auto;
     min-width: auto;

     @include pseudo($content: "\f574") {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        margin-right: 10px;
     }
  }

  &--button-img{
     @include pseudo($content: "\f1c5") 
  }

   &--text {
       color: var(--tisc-text-secondary);
       margin-left: 25px;
       font-style: italic;
       white-space: nowrap;
       border-bottom: 2px solid var(--tisc-text-secondary);
       transition: all .5s;

       &.active {
           border-color: $blue;
       }
   }
}

.required{
  color: $red;
}