@layer components {
  .form-item {
    @apply mb-7 relative;
  
    &.horizontal {
      @apply flex flex-auto;
    }
  
    &.vertical {
      @apply flex flex-col;
    }
  
    &.inline {
      @apply md:inline-flex! mr-3 rtl:ml-3;
    }
  }
  
  .form-label {
    @apply flex items-center font-semibold;
  
    &.invalid {
      @apply text-error;
    }
  }
  
  .form-explain {
    @apply text-error absolute font-semibold;
  }
  
  .form-container {
    &.inline {
      @apply md:flex! items-center;
    }
  }  
}