.file-uploader .label-text{
    @apply block pb-1 text-base font-medium text-textLabel
}
.file-uploader .label-des{
    @apply block p-0 pb-2 text-sm font-medium text-helperText
}
.file-uploader .button-uploader [type=file] {
    height: 0;
    overflow: hidden;
    width: 0;
}
.file-uploader .button-uploader [type=file] + label {
    background: #b6b6b6;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    outline: none;
    padding: 15px 50px;
    position: relative;
    transition: all 0.3s;
    vertical-align: middle;
}
.file-uploader .button-uploader.default [type=file] + label{
    padding: 15px 50px;
    font-size: 16px;
    background: #b6b6b6;
}
.file-uploader .button-uploader.small [type=file] + label{
    padding: 8px 35px;
    font-size: 12px;
}
.file-uploader .button-uploader.medium [type=file] + label{
    padding: 20px 60px;
    font-size: 18px;
}
.file-uploader .button-uploader.large [type=file] + label{
    padding: 25px 70px;
    font-size: 20px;
}
.file-uploader .button-uploader label .upload-icon{
    display: inline-block;
    vertical-align: middle;
    padding-right: 10px;
}
.file-uploader .button-uploader.primary [type=file] + label{
    @apply bg-primary;
}
.file-uploader .button-uploader.secondary [type=file] + label{
    @apply bg-secondary;
}
.file-uploader .button-uploader.dark [type=file] + label{
    @apply bg-dark;
}
.file-uploader .button-uploader label .upload-icon svg{
    width: 30px;
    height: 30px;
    fill: white !important;
}
.file-uploader .button-uploader.default label .upload-icon svg{
    width: 30px;
    height: 30px;
}
.file-uploader .button-uploader.small label .upload-icon svg{
    width: 20px;
    height: 20px;
}
.file-uploader .button-uploader.medium label .upload-icon svg{
    width: 40px;
    height: 40px;
}
.file-uploader .button-uploader.large label .upload-icon svg{
    width: 50px;
    height: 50px;
}
.file-uploader .button-uploader [type=file]:disabled + label{
    @apply bg-disabled cursor-not-allowed !important
}
.drag-uploader{
    @apply p-2 bg-gray;
}
.drag-uploader .dropzone{
    @apply flex flex-1 flex-col items-center p-8 border-2 rounded-sm border-borderColors border-dashed outline-none bg-white text-dark;
    transition: 'border .24s ease-in-out';
}

.drag-uploader.drag-disable .dropzone{
    background: #a3a2a2;
    cursor: not-allowed;
}
.file-default path{
    @apply text-primary;
}

/* Default */
.file-default.drag-uploader .dropzone .upload-icon svg{
    @apply w-12 h-12 fill-dark;
}
.file-default.drag-uploader p {
    @apply text-base;
}
.background-default.upload-icon > path{
    @apply fill-primary;
}

/* Small */
.file-small.drag-uploader .dropzone .upload-icon svg{
    @apply w-8 h-8;
    /* fill:red; */
}


.file-small.drag-uploader p {
    @apply text-sm;
}
.rounded-small.drag-uploader .dropzone    {
    @apply rounded-md;
}

/* Medium */
.file-medium.drag-uploader .dropzone .upload-icon svg{
    @apply w-14 h-14 text-primary;
}
.file-medium.drag-uploader p {
    @apply text-lg;
}
.rounded-medium.drag-uploader .dropzone    {
    @apply rounded-lg;
}

/* large */
.file-large.drag-uploader .dropzone .upload-icon svg{
    @apply w-20 h-20 text-primary;
}
.file-large.drag-uploader p {
    @apply text-2xl;
}

.rounded-large.drag-uploader .dropzone  {
    @apply rounded-2xl;
}

/* Default */
.background-primary.drag-uploader .dropzone .upload-icon svg{
    @apply fill-dark;
}

/* Primary */
.background-primary.drag-uploader .dropzone .upload-icon svg{
    @apply fill-primary;
}

/* Secondary */
.background-secondary.drag-uploader .dropzone .upload-icon svg{
    @apply fill-secondary;
}