input{
  @apply font-base py-0;
}
.form-group label{
  @apply block pb-2 text-base font-medium text-textLabel font-base
}
.form-group .input-group{
  @apply flex w-full relative
}
.input-group .form-control{
  @apply w-full h-default px-4 text-base text-dark outline-none border-2 border-solid border-borderColors hover:border-primary focus:border-primary
}
.form-group p.helper-text{
  @apply block w-full m-0 py-1 text-sm text-disabled
}
.form-group.error .control-label{
  @apply text-danger
}
.error .input-group .form-control{
  @apply  border-danger
}
.error .error-text{
  @apply block w-full m-0 py-1 text-sm text-danger
}
.input-group input:disabled{
  @apply cursor-not-allowed hover:border-borderColors
}
.form-default .input-group .form-control{
  @apply h-default text-base
}
.form-small .input-group .form-control{
  @apply h-small text-sm
}
.form-medium .input-group .form-control{
  @apply h-medium text-lg
}
.form-large .input-group .form-control{
  @apply h-large text-xl
}
.form-default .control-label{
  @apply text-base
}
.form-small .control-label{
  @apply text-sm
}
.form-medium .control-label{
  @apply text-lg
}
.form-large .control-label{
  @apply text-xl
}
.input-group .left{
  @apply absolute px-2 top-[14px]
}
.input-group .right{
  @apply absolute px-4 right-0 top-[14px]
}


/* Rounded default */
.rounded-default .form-control{
  @apply rounded-none
}

/* Rounded small */
.rounded-small .form-control{
  @apply rounded-sm
}

/* Rounded medium */
.rounded-medium .form-control{
  @apply rounded-md
}

/* Rounded full */
.rounded-large .form-control{
  @apply rounded-full
}

.input-group.group-default .left{
  @apply  top-[14px]
}
.input-group.group-default .right{
  @apply  top-[14px]
}
.icon-default svg{
  @apply w-5 h-5;
}
.input-group.group-small .left{
  @apply top-[12px]
}
.input-group.group-small .right{
  @apply top-[12px]
}
.icon-small svg{
  @apply w-4 h-4;
}

.input-group.group-medium .left{
  @apply top-[12px]
}
.input-group.group-medium .right{
  @apply top-[12px]
}
.icon-medium svg{
  @apply w-[26px] h-[26px];
}
.input-group.group-large .left{
  @apply top-[13px]
}
.input-group.group-large .right{
  @apply top-[13px]
}
.icon-large svg{
  @apply w-8 h-8;
}


.color-default svg{
  @apply fill-dark;
}

.color-primary svg{
  @apply fill-primary;
}

.color-secondary svg{
  @apply fill-secondary;
}